<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Metronic - The Ultimate Bootstrap Admin Theme | Documentation</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<meta name="description" content="Metronic - #1 Selling Premium Bootstrap Admin Dashboard Theme of All Time. Build with Twitter Bootstrap 4, SASS, Angular 5. Trusted By Tens of Thousands Users."/>
	<link rel="canonical" href="https://keenthemes.com/"/>
	<meta property="og:locale" content="en_US"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="Premium Bootstrap Admin Themes"/>
	<meta property="og:description" content="Metronic - #1 Selling Premium Bootstrap Admin Theme of All Time. Build with Twitter Bootstrap 4, SASS, Angular 5. Trusted By Tens of Thousands Users."/>
	<meta property="og:url" content="https://keenthemes.com/"/>
	<meta property="og:site_name" content="Keenthemes"/>
	<meta property="article:publisher" content="https://www.facebook.com/keenthemes"/>
	<meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:description" content="Metronic - #1 Selling Premium Bootstrap Admin Theme of All Time. Build with Twitter Bootstrap 4, SASS, Angular 5, Material Design. Trusted By Tens of Thousands Users."/>
	<meta name="twitter:title" content="Premium Bootstrap Admin Themes"/>
	<meta name="twitter:domain" content="Keenthemes"/>

	<link rel="shortcut icon" href="favicon.ico"/>

	<link rel="stylesheet" href="assets/plugins/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/plugins/lity/dist/lity.min.css">
	<link rel="stylesheet" href="assets/style/flaticon.css">
	<link rel="stylesheet" href="assets/plugins/line-awesome/css/line-awesome.min.css">
	<link rel="stylesheet" href="assets/plugins/socicon/css/socicon.css">
	<link rel="stylesheet" href="assets/plugins/filament-sticky/fixedsticky.css">
	<link rel="stylesheet" href="assets/plugins/tether/dist/css/tether.min.css">
	<link rel="stylesheet" href="assets/style/style.css">
	<!-- Code Highlight -->
	<link rel="stylesheet" href="assets/plugins/highlight.js/styles/railscasts.css">

	<script src="assets/plugins/jquery/dist/jquery.min.js"></script>
	<script src="assets/plugins/tether/dist/js/tether.min.js"></script>
	<script src="assets/plugins/popper.js/dist/umd/popper.min.js"></script>
	<script src="assets/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="assets/plugins/lity/dist/lity.min.js"></script>
	<script src="assets/plugins/filament-fixed/fixedfixed.js"></script>
	<script src="assets/plugins/filament-sticky/fixedsticky.js"></script>

	<!-- Code Highlight -->
	<script src="assets/plugins/highlight.js/lib/highlight.js"></script>
	<script src="assets/plugins/highlight.js/build/highlight.pack.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

	<script src="assets/js/custom.js"></script>
</head>
<body data-spy="scroll" data-target="#sidebarMenu" data-offset="150">

<div class="wrapper"><!-- wrapper -->


	<section class="section section--white section--padding"><!-- section -->
		<div class="content">

			<div class="contents">
				<!-- contents -->

				<div class="contents__sidebar contents__sidebar--mn sidebar-hide" id="sidebarScroll">
					<!-- contents__sidebar    fixedsticky-->
					<ul id="sidebarMenu" class="nav contents__sidebar_list_inset">
						<li><a href="#sec1" class="nav-link active">Overview</a></li>
						<li><a href="#sec1-1" class="nav-link">Quick Start</a></li>
						<li class="sublist_parent">
							<a href="#sec2" class="nav-link">
								Installation
								<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
							</a>
							<ul class="nav sublist_inset">
								<li><a href="#sec2-1" class="nav-link">Overview</a></li>
								<li><a href="#sec2-2" class="nav-link">Node.js</a></li>
								<li><a href="#sec2-3" class="nav-link">NPM</a></li>
								<li><a href="#sec2-4" class="nav-link">Yarn</a></li>
								<li><a href="#sec2-5" class="nav-link">Gulp</a></li>
								<li><a href="#sec2-6" class="nav-link">Git</a></li>
								<li><a href="#sec2-7" class="nav-link">Migrating to Yarn</a></li>
								<li><a href="#sec2-8" class="nav-link">Upgrade</a></li>
							</ul>
						</li>
						<li><a href="#sec2-github" class="nav-link">GitHub Access</a></li>
						<li class="sublist_parent">
							<a href="#sec3" class="nav-link">
								Files Structure
								<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
							</a>
							<ul class="nav sublist_inset">
								<li><a href="#sec3-1" class="nav-link">Overview</a></li>
								<li><a href="#sec3-2" class="nav-link">Javascript</a></li>
								<li><a href="#sec3-3" class="nav-link">SASS</a></li>
							</ul>
						</li>
						<li class="sublist_parent">
							<a href="#sec4" class="nav-link">
								Build Tools
								<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
							</a>
							<ul class="nav sublist_inset">
								<li><a href="#sec4-1" class="nav-link">Overview</a></li>
								<li><a href="#sec4-2" class="nav-link">Config</a></li>
								<li><a href="#sec4-3" class="nav-link">Tasks</a></li>
							</ul>
						</li>
						<li class="sublist_parent">
							<a href="#sec5" class="nav-link">
								Stylesheets
								<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
							</a>
							<ul class="nav sublist_inset">
								<li><a href="#sec5-1" class="nav-link">Overview</a></li>
								<li><a href="#sec5-2" class="nav-link">Config</a></li>
								<li><a href="#sec5-4" class="nav-link">Mixins</a></li>
								<li><a href="#sec5-5" class="nav-link">Functions</a></li>
								<li><a href="#sec5-3" class="nav-link">Helper Classes</a></li>
							</ul>
						</li>
						<li class="sublist_parent">
							<a href="#sec6" class="nav-link">
								Components
								<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
							</a>
							<ul class="nav sublist_inset">
								<li><a href="#sec6-1" class="nav-link">Util</a></li>
								<li><a href="#sec6-2" class="nav-link">App</a></li>
                <li>
                  <a href="#sec14" class="nav-link">
                    Datatable
                    <span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
                  </a>
                  <ul class="nav sublist_inset">
                    <li><a href="#sec14-1" class="nav-link">Overview</a></li>
                    <li><a href="#sec14-2" class="nav-link">Initialization</a></li>
                    <li><a href="#sec14-3" class="nav-link">Options</a></li>
                    <li><a href="#sec14-4" class="nav-link">Events</a></li>
                    <li><a href="#sec14-5" class="nav-link">API Methods</a></li>
                    <li><a href="#sec14-6" class="nav-link">Ajax Response</a></li>
                    <li><a href="#sec14-7" class="nav-link">Angular Datatable</a></li>
                    <li><a href="#sec14-8" class="nav-link">Extensions</a></li>
                  </ul>
                </li>
								<li>
									<a href="#sec15" class="nav-link">
										Menu
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec15-1" class="nav-link">Overview</a></li>
										<li><a href="#sec15-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec15-3" class="nav-link">Options</a></li>
										<li><a href="#sec15-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec16" class="nav-link">
										Dropdown
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec16-1" class="nav-link">Overview</a></li>
										<li><a href="#sec16-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec16-3" class="nav-link">Options</a></li>
										<li><a href="#sec16-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec17" class="nav-link">
										Header
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec17-1" class="nav-link">Overview</a></li>
										<li><a href="#sec17-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec17-3" class="nav-link">Options</a></li>
										<li><a href="#sec17-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec18" class="nav-link">
										Offcanvas
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec18-1" class="nav-link">Overview</a></li>
										<li><a href="#sec18-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec18-3" class="nav-link">Options</a></li>
										<li><a href="#sec18-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec19" class="nav-link">
										Portlet
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec19-1" class="nav-link">Overview</a></li>
										<li><a href="#sec19-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec19-3" class="nav-link">Options</a></li>
										<li><a href="#sec19-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec20" class="nav-link">
										Quicksearch
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec20-1" class="nav-link">Overview</a></li>
										<li><a href="#sec20-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec20-3" class="nav-link">Options</a></li>
										<li><a href="#sec20-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec21" class="nav-link">
										Scrolltop
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec21-1" class="nav-link">Overview</a></li>
										<li><a href="#sec21-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec21-3" class="nav-link">Options</a></li>
										<li><a href="#sec21-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec22" class="nav-link">
										Toggle
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec22-1" class="nav-link">Overview</a></li>
										<li><a href="#sec22-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec22-3" class="nav-link">Options</a></li>
										<li><a href="#sec22-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
								<li>
									<a href="#sec23" class="nav-link">
										Wizard
										<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
									</a>
									<ul class="nav sublist_inset">
										<li><a href="#sec23-1" class="nav-link">Overview</a></li>
										<li><a href="#sec23-2" class="nav-link">Initialization</a></li>
										<li><a href="#sec23-3" class="nav-link">Options</a></li>
										<li><a href="#sec23-5" class="nav-link">API Methods</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="sublist_parent">
							<a href="#sec7" class="nav-link">
								Angular
								<span class="arrow__icon_wrap">
									<i class="la la-angle-left"></i>
								</span>
							</a>
							<ul class="nav sublist_inset">
								<li><a href="#sec71" class="nav-link">Overview</a></li>
								<li><a href="#sec72" class="nav-link">Files Structure</a></li>
								<li><a href="#sec73" class="nav-link">Installation</a></li>
								<li><a href="#sec74" class="nav-link">Tools</a></li>
								<li><a href="#sec75" class="nav-link">Sample Codes</a></li>
							</ul>
						</li>
						<li><a href="#sec10" class="nav-link">Layout Builder</a></li>
						<li><a href="#sec8" class="nav-link">API Reference</a></li>
						<li><a href="#sec11" class="nav-link">.NET Integration</a></li>
						<li><a href="#sec13" class="nav-link">More Resources</a></li>
						<li><a href="#sec9" class="nav-link">References</a></li>
					</ul>
				</div><!-- contents__sidebar END -->

				<div class="contents__box contents__box--right"><!-- contents__box -->

					<div id="sec1" class="section">
						<h2 class="section-head">Overview</h2>
						<div class="section-content">
							Metronic is the most trusted and popular admin theme in the market which is based on Bootstrap 4 framework
							that provides a complete frontend to build any type of web applications.
							Metronic comes with multiple demos for classic jQuery and Angular versions. Metronic package also includes powerful build tools to manage and deploy project assets easily. This documentation provides the information you need to be able to use Metronic in your applications, customising it to match your exact requirements to get your projects done successfully.
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec1-1" class="section">
						<h2 class="section-head">Quick Start</h2>
						<div class="section-content">
							<ol>
								<li>Download the latest Theme source from ThemeForest.</li>
								<li>Download and install Node.js from
									<a href="https://nodejs.org/en/download/" target="_blank">nodejs.org/en/download/</a>
								</li>
								<li>Start command prompt window or terminal and change directory to
									<code>[root]/tools/</code>
									<pre><code>cd theme/angular/tools</code></pre>
									<pre><code>cd theme/default/tools</code></pre>
								</li>
								<li>Install the latest version of <code>npm</code>.
									<pre><code>npm install --global npm@latest</code></pre>
								</li>
								<li>Install the latest version of <code>yarn</code>.
									<pre><code>npm install --global yarn</code></pre>
								</li>
								<li>Install <code>gulp</code>.
									<pre><code>npm install --global gulp-cli</code></pre>
								</li>
								<li>Install yarn dependencies. Must execute in
									<code>[root]/tools/</code> folder.
									<pre><code>yarn install</code></pre>
								</li>
								<li>Compile scss and javascript using
									<code>gulp</code>. You need to run this command everytime scripts under
									<code>[root]/src</code> has been changed. This command must execute in the
									<code>[root]/tools</code> folder.
									<pre><code>gulp --prod</code></pre>
								</li>
								<li>Run Angular application
									<pre><code>cd [root]/dist/demo/[demo_id]</code></pre>
									<pre><code>npm install</code></pre>
									<pre><code>ng serve</code></pre>
								</li>
								<li>Default static HTML location
									<pre><code>cd [root]/dist/demo/[demo_id]</code></pre>
								</li>
							</ol>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec2" class="section">
						<h2 class="section-head">Installation</h2>

						<h3 id="sec2-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p>This section guides you to install all required software and libraries in order to fully utilize Metronic for your projects.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec2-2" class="section-title">Install Node.js</h3>
						<div class="section-content">
							<p>Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the Metronic build tools.
								Download the latest version of Node and install it:
								<a href="https://nodejs.org/en/download/" target="_blank">nodejs.org/en/download/</a>
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec2-3" class="section-title">Install NPM</h3>
						<div class="section-content">
							<p>Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.</p>
							<pre><code>npm install --global npm@latest</code></pre>
							<p>Verify that npm in successfully installed, and version of installed npm will appear.</p>
							<pre><code>npm --version</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec2-4" class="section-title">Install Yarn</h3>
						<div class="section-content">
							<p>Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.</p>
							<pre><code>npm install --global yarn</code></pre>
							<p>Verify that yarn in successfully installed, and version of installed yarn will appear.</p>
							<pre><code>yarn --version</code></pre>
							<p>Here is just a way to install yarn, using npm package manager. Alternatively, you can install yarn using other methods as stated in yarn installation site.
								More information on yarn installation, please check the documentation:
								<a href="https://yarnpkg.com/lang/en/docs/install/">https://yarnpkg.com/lang/en/docs/install/</a>
							</p>
							<p class="alert alert-warning" style="margin: 25px 0 25px 0;">Please don't forget to run
								<code>yarn install</code> after every Metronic updates released in order to install newly added or updated 3rd-party plugins.
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec2-5" class="section-title">Install Gulp</h3>
						<div class="section-content">
							<p>Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally.</p>
							<pre><code>npm install --global gulp-cli</code></pre>
							<p>If you have previously installed a version of
								<code>gulp</code> globally, please remove it to make sure old version doesn't collide with new
								<code>gulp-cli</code>.</p>
							<pre><code>npm rm --global gulp</code></pre>
							<p>Verify that gulp in successfully installed, and version of installed gulp will appear.</p>
							<pre><code>gulp --version</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec2-6" class="section-title">Install Git</h3>
						<div class="section-content">
							<p>Git is a distributed version control system designed to handle projects. Download and install Git from
								<a href="https://git-scm.com/">https://git-scm.com/</a>.</p>
							<p>Verify that Git in successfully installed, and version of installed Git will appear.</p>
							<pre><code>git --version</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec2-7" class="section-title">Migrating to Yarn</h3>
						<div class="section-content">
							<p>Since Metronic v5.0.6, we are using Yarn and no longer use Bower as package dependencies. Please install the latest version Yarn for global install.</p>
							<pre><code>npm install --global yarn</code></pre>
							<p>Inside the <code>[root]/tools/</code> directory, remove the old
								<code>bower_components</code> folder. Run
								<code>yarn install</code> command to install dependencies using yarn.</p>
							<pre><code>yarn install</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec2-8" class="section-title">Upgrade</h3>
						<div class="section-content">
							Metronic Angular always use the latest Angular-CLI. Please update your global Angular-CLI when received the new Metronic updates.
							<pre><code>npm install -g @angular/cli@latest</code></pre>
						</div>

						<div class="space"></div>
					</div>

					<div class="separator"></div>

					<div id="sec2-github" class="section">
						<h2 class="section-head">GitHub Access</h2>
						<p>
							Head to
							<a href="https://keenthemes.com/metronic/github" target="_blank">https://keenthemes.com/metronic/github</a> to register.
							Please provide your GitHub username and a valid Metronic purchase code from your ThemeForest account and receive our invitation to access to the Metronic's private repositories.
							Once you accept the invitation you will be added as a collaborator with following privileges:
						</p>
						<ul>
							<li>You can access to the latest development version.</li>
							<li>You can report issues and access to the hot bug fixes and new features before Themeforest release.</li>
							<li>You can send pull requests that will be reviewed by us.</li>
						</ul>

						<div class="space"></div>

						<h3 class="section-title">Cloning a Git repository</h3>
						<p>You can use
							<a href="https://www.sourcetreeapp.com/" target="_blank">Sourcetree</a> for free or any other Git client software to clone from the Metronic's default and angular versions repositories:

						<pre><code>https://github.com/KeenthemesHub/Metronic-Default.git</code></pre>
						<pre><code>https://github.com/KeenthemesHub/Metronic-Angular.git</code></pre>

						<p>If the cloning was successful, a new sub-directory appears on your local drive. This directory has the same name as the repository that you cloned.</p>
					</div>

					<div class="separator"></div>

					<div id="sec3" class="section">
						<h2 class="section-head">Files Structure</h2>

						<h3 id="sec3-1" class="section-title">Overview</h3>
						<div class="section-content">
							Metronic comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain Metronic's entire file structure and how to adapt it to your project.
							<div class="alert alert-warning" style="margin: 25px 0 25px 0;">
								<p><code>[root]</code> is refers to the package type version.</p>
								<ul>
									<li><code>default</code> is the default version based on HTML, jQuery and Bootstrap
									</li>
									<li>
										<code>angular</code> is the Angular integrated hybrid version built on top of the default version with
										<a href="https://cli.angular.io/" target="_blank">Angular-CLI</a></li>
								</ul>
							</div>
						</div>

						<div class="space"></div>

						<table class="table-list">
							<thead>
							<tr>
								<th class="force-border">Path</th>
								<th class="force-border">Description</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td nowrap><span class="file-node file-node-dot">dist</span></td>
								<td>Theme versions folder</td>
							</tr>
							<tr>
								<td nowrap><span class="file-node file-node-dot">docs</span></td>
								<td>The theme documentation</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;"><span class="file-node file-node-dot">..</span>
								</td>
								<td>Demo contents</td>
							</tr>
							<tr>
								<td nowrap><span class="file-node file-node-dot">src</span>
								</td>
								<td>Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;"><span class="file-node file-node-dot">js</span>
								</td>
								<td>Javascript source files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;">
									<span class="file-node file-node-dot">media</span></td>
								<td>Media(image, video, font files, etc) files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;"><span class="file-node file-node-dot">sass</span>
								</td>
								<td>Sass source files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;">
									<span class="file-node file-node-dot">vendors</span></td>
								<td>3rd party libraries</td>
							</tr>
							<tr>
								<td nowrap>
									<span class="file-node file-node-dot">tools</span></td>
								<td>Development and deployment tools</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;"><span class="file-node file-node-dot">gulp</span>
								</td>
								<td>The build tools gulp tasks for bundle and minify the js and css files and complile sass files.</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;">
									<span class="file-node file-node-dot">node_modules</span></td>
								<td>NPM package installation folder</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;">
									<span class="file-node file-node-dot">[version_package].json</span></td>
								<td>Metronic build config file. Depends on which version package, either default or angular. Here you can configure the build according to your requirements</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;">
									<span class="file-node file-node-dot">gulpfile.json</span></td>
								<td>Gulp tasks main script. All the build tool tasks are grouped in this script</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;">
									<span class="file-node file-node-dot">package.json</span></td>
								<td>NPM package manager config file</td>
							</tr>
							<tr>
								<td nowrap><span class="file-node file-node-dot">..</span></td>
								<td>Another version package</td>
							</tr>
							</tbody>
						</table>

						<div class="space"></div>

						<h3 id="sec3-2" class="section-title">Javascript</h3>
						<div class="section-content">
							Below table explains Metronic javascript file structure. Is it located based on which version package, either defult or angular.
							The table below start with the path: <code>[root]/src/</code>
						</div>
						<div class="space"></div>
						<table class="table-list">
							<thead>
							<tr>
								<th class="force-border">Path</th>
								<th class="force-border">Description</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td nowrap><span class="file-node file-node-dot">src</span>
								</td>
								<td>Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;"><span class="file-node file-node-dot">js</span>
								</td>
								<td>Javascript files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 60px;"><span class="file-node file-node-dot">app</span>
								</td>
								<td>Application level(global) javascript files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">base</span></td>
								<td>Application level base javascript files are minified and concatenated into the base bundle
									<code>assets/demo/[demo_id]/base/scripts.bundle.js</code> to be included globally.
									<code>demo_id</code> is the selected demo name.
								</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">custom</span></td>
								<td>Application level custom javascript files are minified and moved to
									<code>assets/app/js/*</code> to be included on demand.
								</td>
							</tr>

							<tr>
								<td nowrap style="padding-left: 60px;"><span class="file-node file-node-dot">demo</span>
								</td>
								<td>Demo level javascript files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">default</span></td>
								<td nowrap><code>Default</code> demo javascript files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 100px;">
									<span class="file-node file-node-dot">base</span></td>
								<td>
									Demo level base javascript files are minified and concatenated into the base bundle
									<code>assets/demo/[demo_id]/base/scripts.bundle.js</code> to be included globally.
									<code>demo_id</code> is the selected demo name.
								</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">custom</span></td>
								<td>
									Demo level custom javascript files are minified and moved to
									<code>assets/demo/[demo_id]/custom/*</code> to be included on demand.
									<code>demo_id</code> is the selected demo name.
								</td>
							</tr>

							<tr>
								<td nowrap style="padding-left: 80px;"><span class="file-node file-node-dot">...</span>
								</td>
								<td>Other demos</td>
							</tr>

							<tr>
								<td nowrap style="padding-left: 60px;">
									<span class="file-node file-node-dot">framework</span></td>
								<td>
									Framework components javascript files are minified and concatenated into the base bundle
									<code>assets/demo/[demo_id]/base/scripts.bundle.js</code> to be included globally.
									<code>demo_id</code> is the selected demo name.
								</td>
							</tr>

							<tr>
								<td nowrap style="padding-left: 60px;">
									<span class="file-node file-node-dot">snippets</span></td>
								<td>Snippets are custom templates created for certain requirements by customizing and extending the theme's base components and plugins</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">base</span></td>
								<td>
									Base snippets javascript files are minified and concatenated into the base bundle
									<code>assets/demo/[demo_id]/base/scripts.bundle.js</code> to be included globally.
									<code>demo_id</code> is the selected demo name.</code>
								</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">custom</span></td>
								<td>
									Application level custom javascript files are minified and moved to
									<code>assets/snippets/*</code> to be included on demand.
								</td>
							</tr>
							</tbody>
						</table>

						<div class="space"></div>

						<h3 id="sec3-3" class="section-title">SASS</h3>
						<div class="section-content">
							Below table explains Metronic SASS file structure. Is it located based on which version package, either defult or angular.
							The table below start with the path: <code>[root]/src/</code>
						</div>
						<div class="space"></div>
						<table class="table-list">
							<thead>
							<tr>
								<th class="force-border">Path</th>
								<th class="force-border">Description</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td nowrap><span class="file-node file-node-dot">src</span>
								</td>
								<td>Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 40px;"><span class="file-node file-node-dot">sass</span>
								</td>
								<td>Javascript files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 60px;"><span class="file-node file-node-dot">demo</span>
								</td>
								<td>Demo level sass files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">default</span></td>
								<td nowrap><code>Default</code> demo sass files</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 100px;">
									<span class="file-node file-node-dot">style.css</span></td>
								<td>
									<code>style.scss</code> is compiled, minified and concatenated into the base bundle stylesheet
									<code>assets/demo/[demo_id]/base/style.bundle.css</code> to be included globally.
									<code>demo_id</code> is the selected demo name.
								</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;"><span class="file-node file-node-dot">...</span>
								</td>
								<td>Other demos</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 60px;">
									<span class="file-node file-node-dot">framework</span></td>
								<td>
									Framework scss files are compiled, minified and concatenated into the base bundle
									<code>assets/demo/[demo_id]/base/style.bundle.css</code> to be included globally.
									<code>demo_id</code> is the selected demo name.
								</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 60px;">
									<span class="file-node file-node-dot">snippets</span></td>
								<td>Snippets sass files are compiled, minified and concatenated into the base bundle
									<code>assets/demo/[demo_id]/base/style.bundle.css</code> to be included globally.
									<code>demo_id</code> is the selected demo name.
								</td>
							</tr>
							<tr>
								<td nowrap style="padding-left: 80px;">
									<span class="file-node file-node-dot">custom</span></td>
								<td>
									Application level custom javascript files are minified and moved to
									<code>assets/snippets/*</code> to be included on demand.
								</td>
							</tr>
							</tbody>
						</table>

						<div class="space"></div>
					</div>

					<div class="separator"></div>

					<div id="sec4" class="section">
						<h2 class="section-head">Build Tools</h2>

						<h3 id="sec4-1" class="section-title">
							Overview
						</h3>
						<div class="section-content">
							<p>
								Metronic build tools provides easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production.<br><br>
								Metronic's central <code>default.json</code> and
								<code>angular.json</code> build config files allows you manage the entire assest bundling for production by taking advantage of
								<code>yarn</code> package manager.
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec4-2" class="section-title">Build Config</h3>
						<div class="section-content">
							<p>The build config file is located at
								<code>[root]/tools/conf/[version_package].json</code> and you can fully customize the build settings to meet your project requirements:
							</p>
							<p>Please make sure the dist output path <code>config.dist</code> is set to true in
								<code>default.json</code> and
								<code>angular.json</code>, for the build tools to output the compilation.</p>

							<div class="space"></div>

							<pre><code>{
    "config": {
        "demo": "",
        "debug": false,
        "compile": {
            "jsUglify": false,
            "cssMinify": false,
            "jsSourcemaps": false,
            "cssSourcemaps": false
        },
        "path": {
            "src": "./../theme/[root]/src",
            "node_modules": "./node_modules",
            "demo_api_url": "https://keenthemes.com/metronic/preview/"
        },
        "dist": [
            "./../theme/dist/preview/assets",
            "./../theme/dist/default/**/assets"
        ]
    },
    "build": {
        "vendors": {
            "base": {
                "src": {
                    "mandatory": {
                        "jquery": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery/dist/jquery.js"
                            ]
                        },
                        "bootstrap": {
                            "scripts": [
                                "{$config.path.node_modules}/popper.js/dist/umd/popper.js",
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
                            ]
                        },
                        "js-cookie": {
                            "scripts": [
                                "{$config.path.node_modules}/js-cookie/src/js.cookie.js"
                            ]
                        },
                        "jquery-smooth-scroll": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-smooth-scroll/jquery.smooth-scroll.js"
                            ]
                        },
                        "moment": {
                            "scripts": [
                                "{$config.path.node_modules}/moment/min/moment.min.js"
                            ]
                        },
                        "wNumb": {
                            "scripts": [
                                "{$config.path.node_modules}/wnumb/wNumb.js"
                            ]
                        }
                    },
                    "optional": {
                        "jquery.repeater": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery.repeater/src/intro.js",
                                "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                                "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                                "{$config.path.node_modules}/jquery.repeater/src/repeater.js",
                                "{$config.path.node_modules}/jquery.repeater/src/outro.js"
                            ]
                        },
                        "jquery-form": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-form/dist/jquery.form.min.js"
                            ]
                        },
                        "tether": {
                            "styles": [
                                "{$config.path.node_modules}/tether/dist/css/tether.css"
                            ],
                            "scripts": []
                        },
                        "malihu-custom-scrollbar-plugin": {
                            "styles": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/mCSB_buttons.png"
                            ]
                        },
                        "block-ui": {
                            "scripts": [
                                "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
                            ]
                        },
                        "bootstrap-datepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
                            ]
                        },
                        "bootstrap-datetime-picker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"
                            ]
                        },
                        "bootstrap-timepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-timepicker.init.js"
                            ]
                        },
                        "bootstrap-daterangepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.js"
                            ]
                        },
                        "bootstrap-touchspin": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
                            ]
                        },
                        "bootstrap-maxlength": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                            ]
                        },
                        "bootstrap-switch": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/js/bootstrap-switch.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-switch.init.js"
                            ]
                        },
                        "bootstrap-multiselectsplitter": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                            ]
                        },
                        "bootstrap-select": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.js"
                            ]
                        },
                        "select2": {
                            "styles": [
                                "{$config.path.node_modules}/select2/dist/css/select2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/select2/dist/js/select2.js"
                            ]
                        },
                        "typeahead.js": {
                            "scripts": [
                                "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
                            ]
                        },
                        "inputmask": {
                            "scripts": [
                                "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.phone.extensions.js"
                            ]
                        },
                        "nouislider": {
                            "styles": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
                            ]
                        },
                        "autosize": {
                            "scripts": [
                                "{$config.path.node_modules}/autosize/dist/autosize.js"
                            ]
                        },
                        "clipboard": {
                            "scripts": [
                                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
                            ]
                        },
                        "ion-rangeslider": {
                            "styles": [
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css",
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
                            ]
                        },
                        "dropzone": {
                            "styles": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.js"
                            ]
                        },
                        "summernote": {
                            "styles": [
                                "{$config.path.node_modules}/summernote/dist/summernote.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/summernote/dist/summernote.js"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/summernote/dist/font/**"
                            ]
                        },
                        "bootstrap-makrdown": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-markdown.init.js"
                            ]
                        },
                        "jquery-validation": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
                                "{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/jquery-validation.init.js"
                            ]
                        },
                        "remarkable-bootstrap-notify": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
                                "{$config.path.src}/js/framework/components/plugins/base/bootstrap-notify.init.js"
                            ]
                        },
                        "animate.css": {
                            "styles": [
                                "{$config.path.node_modules}/animate.css/animate.min.css"
                            ]
                        },
                        "toastr": {
                            "styles": [
                                "{$config.path.node_modules}/toastr/build/toastr.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/toastr/build/toastr.min.js"
                            ]
                        },
                        "jstree": {
                            "styles": [
                                "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jstree/dist/jstree.js"
                            ],
                            "images": [
                                "{$config.path.src}/vendors/jstree/32px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/40px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/*.gif"
                            ]
                        },
                        "morris.js": {
                            "styles": [
                                "{$config.path.node_modules}/morris.js/morris.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/raphael/raphael.js",
                                "{$config.path.node_modules}/morris.js/morris.js"
                            ]
                        },
                        "chartist": {
                            "styles": [
                                "{$config.path.node_modules}/chartist/dist/chartist.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/chartist/dist/chartist.js"
                            ]
                        },
                        "chart.js": {
                            "scripts": [
                                "{$config.path.node_modules}/chart.js/dist/Chart.bundle.js",
                                "{$config.path.src}/js/framework/components/plugins/charts/chart.init.js"
                            ]
                        },
                        "bootstrap-session-timeout": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-session-timeout/bootstrap-session-timeout.min.js"
                            ]
                        },
                        "jquery-idletimer": {
                            "scripts": [
                                "{$config.path.src}/vendors/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "counterup": {
                            "scripts": [
                                "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                                "{$config.path.node_modules}/counterup/jquery.counterup.js"
                            ]
                        },
                        "socicon": {
                            "styles": [
                                "{$config.path.node_modules}/socicon/css/socicon.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/socicon/font/**"
                            ]
                        },
                        "font-awesome": {
                            "styles": [
                                "{$config.path.node_modules}/font-awesome/css/font-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/font-awesome/fonts/**"
                            ]
                        },
                        "line-awesome": {
                            "styles": [
                                "{$config.path.src}/vendors/line-awesome/css/line-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/line-awesome/fonts/**"
                            ]
                        },
                        "flaticon": {
                            "styles": [
                                "{$config.path.src}/vendors/flaticon/css/flaticon.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/flaticon/fonts/**"
                            ]
                        },
                        "metronic": {
                            "styles": [
                                "{$config.path.src}/vendors/metronic/css/styles.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/metronic/fonts/**"
                            ]
                        }
                    }
                },
                "bundle": {
                    "styles": "{$config.output}/vendors/base/vendors.bundle.css",
                    "scripts": "{$config.output}/vendors/base/vendors.bundle.js",
                    "images": "{$config.output}/vendors/base/images",
                    "fonts": "{$config.output}/vendors/base/fonts"
                }
            },
            "custom": {
                "jquery-ui": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.css"
                        ],
                        "scripts": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.js",
                            "{$config.path.node_modules}/fullcalendar/dist/gcal.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/gmaps/gmaps.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
                    }
                },
                "jqvmap": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jqvmap/dist/jqvmap.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jqvmap/dist/jquery.vmap.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.europe.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.russia.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.usa.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.world.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.js"
                    }
                },
                "flot": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/Flot/jquery.flot.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.resize.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.categories.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.pie.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.stack.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.axislabels.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
                    }
                }
            }
        },
        "demo": {
            "default": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/default/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/default/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/default/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/default/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/default/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/default/custom/",
                        "media": "{$config.output}/demo/default/media/"
                    }
                }
            },
            "demo2": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo2/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo2/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo2/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo2/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo2/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo2/custom/",
                        "media": "{$config.output}/demo/demo2/media/"
                    }
                }
            },
            "demo3": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo3/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo3/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo3/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo3/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo3/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo3/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo3/custom/",
                        "media": "{$config.output}/demo/demo3/media/"
                    }
                }
            },
            "demo4": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo4/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo4/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo4/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo4/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo4/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo4/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo4/custom/",
                        "media": "{$config.output}/demo/demo4/media/"
                    }
                }
            },
            "demo5": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo5/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo5/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo5/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo5/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo5/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo5/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo5/custom/",
                        "media": "{$config.output}/demo/demo5/media/"
                    }
                }
            },
            "demo6": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo6/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo6/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo6/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo6/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo6/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo6/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo6/custom/",
                        "media": "{$config.output}/demo/demo6/media/"
                    }
                }
            }
        },
        "snippets": {
            "src": {
                "scripts": [
                    "{$config.path.src}/js/snippets/custom/**/*.js"
                ]
            },
            "output": {
                "scripts": "{$config.output}/snippets/"
            }
        },
        "app": {
            "src": {
                "scripts": [
                    "{$config.path.src}/js/app/custom/**/*.js"
                ],
                "media": [
                    "{$config.path.src}/media/app/**/*.*"
                ]
            },
            "output": {
                "scripts": "{$config.output}/app/js",
                "media": "{$config.output}/app/media"
            }
        }
    }
}</code></pre>

							<div class="alert alert-warning" style="margin: 25px 0 25px 0;">
								<h4 class="section-subtitle">Required Core CSS and JS files</h4>
								<p>Vendors list under <code>build.vendors.base.src.mandatory</code> is required, and the
									<code>build.vendors.base.src.optional</code> is optional. Also JS & CSS files in
									<code>demo.[demo_id]*</code> is required for specific demo styles and scripts.</p>
								<p>* <code>[demo_id]</code> is the unique demo name, like default, demo2, demo3, etc.
								</p>
								<p>Under <code>snippets</code> and
									<code>app</code> nodes are for preview demo and optional.</p>
							</div>

							<table class="table-list">
								<thead>
								<tr>
									<th colspan="3">Build Config</th>
								</tr>
								</thead>
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>config.demo</code></td>
									<td nowrap><code>string</code></td>
									<td>Specify an ID of the selected demo for gulp tool to build assets only for selected demo</td>
								</tr>
								<tr>
									<td nowrap><code>config.debug</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable debug console log.</td>
								</tr>
								<tr>
									<td nowrap><code>config.compile.jsUglify</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable output Javascript minify.</td>
								</tr>
								<tr>
									<td nowrap><code>config.compile.cssMinify</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable output CSS minify.</td>
								</tr>
								<tr>
									<td nowrap><code>config.compile.jsSourcemaps</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable output Javascript with sourcemaps.</td>
								</tr>
								<tr>
									<td nowrap><code>config.compile.cssSourcemaps</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable output CSS with sourcemaps.</td>
								</tr>
								<tr>
									<td nowrap><code>config.path</code></td>
									<td nowrap><code>object</code></td>
									<td>
										Predefined paths the where <code>src/</code>, <code>node_modules/</code> and
										<code>theme/[root]/src/</code> are located.
										<code>demo_api_url</code> is the ajax API path used by datatables, dropdowns with live search and other json server side data source related demos.
									</td>
								</tr>
								<tr>
									<td nowrap><code>config.dist</code></td>
									<td nowrap><code>object</code></td>
									<td>
										<code>dist</code> stands for
										<code>distributable</code> and refers to the directories where the minified and bundled assets will be stored for production uses.
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="3" class="force-border">Build Items</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>build.vendors</code></td>
									<td nowrap><code>object</code></td>
									<td><code>vendors</code> object specifies all 3rd party resources to be deployed to
										<code>assets/vendors/</code> folder for production usage
									</td>
								</tr>
								<tr>
									<td nowrap><code>build.vendors.base</code></td>
									<td nowrap><code>object</code></td>
									<td>This object specifies global 3rd party resources to be added into the base css and js vendors bundles
										<code>assets/vendors/base/vendors.bundle.js</code> and
										<code>assets/vendors/base/vendors.bundle.css</code><br><br>
										The 3rd party plugin images or font files also will be deployed into
										<code>assets/vendors/base/images</code> and
										<code>assets/vendors/base/fonts</code>
									</td>
								</tr>
								<tr>
									<td nowrap><code>build.vendors.custom</code></td>
									<td nowrap><code>object</code></td>
									<td>
										This object specifies 3rd party resources that are includable on demand from
										<code>assets/vendors/custom/</code> folder
									</td>
								</tr>

								<tr>
									<td nowrap><code>build.demo.default</code></td>
									<td nowrap><code>object</code></td>
									<td>
										<code>Default</code> demo assets
									</td>
								</tr>

								<tr>
									<td nowrap><code>build.demo.default.base</code></td>
									<td nowrap><code>object</code></td>
									<td>
										This object specifies the global assets of the demo to be added into the base css and js demo bundles
										<code>assets/demo/default/base/scripts.bundle.js</code>
										and <code>assets/demo/default/base/styles.bundle.css</code><br><br>
										The media(e.g: images) of the demo are deployed into
										<code>assets/demo/default/media</code>
									</td>
								</tr>
								<tr>
									<td nowrap><code>build.demo.default.custom</code></td>
									<td nowrap><code>object</code></td>
									<td>
										This object specifies custom assets that are includable on demand from
										<code>assets/demo/default/custom/</code> folder
									</td>
								</tr>
								<tr>
									<td nowrap><code>build.snippets</code></td>
									<td nowrap><code>object</code></td>
									<td>
										This object specifies snippets assets that are includable on demand from
										<code>assets/snippets/</code> folder
									</td>
								</tr>
								<tr>
									<td nowrap><code>build.app</code></td>
									<td nowrap><code>object</code></td>
									<td>
										This object specifies application level global assets that are includable on demand from
										<code>assets/app/</code> folder.
										Useful if you want to add custom scripts that are used in some spesific pages only.
									</td>
								</tr>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec4-3" class="section-title">Tasks</h3>

						<p class="alert alert-danger" style="margin: 25px 0 25px 0;">Please update the
							<code>Node.js</code>, global <code>npm</code> and
							<code>yarn</code> to the latest version, if you got the error related to the
							<code>node-sass</code>.</p>

						<p class="alert alert-warning" style="margin: 25px 0 25px 0;">
							Make sure that before running below tasks the <code>demo</code> parameter in
							<code>[root]/tools/conf/[version_package].json</code> is set to your current selected demo id (e.g: default, demo2, demo8 or demo12).<br>
							Leave the <code>demo</code> parameter empty to build for all demos.<br>
							Please set <code>config.path.demo_api_url</code> parameter in
							<code>[root]/tools/conf/[version_package].json</code> URL to your installed localhost API.
						</p>

						<div class="section-content">
							<p>Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.</p>
							<pre><code>cd [root]/tools/</code></pre>

							<p>
								For the first time launch, run the command below to install the npm dependencies defined in
								<code>[root]/tools/package.json</code> (if you haven't done already) :
							</p>
							<pre><code>yarn install</code></pre>

							<p>For the first time or after every modification in
								<code>[root]/src/</code>, run below task to compile the assets as defined in
								<code>[root]/tools/conf/[version_package].json</code> :
							</p>
							<pre><code>gulp</code></pre>

							<p>Provide argument <code>--prod</code> to build assets with JS and CSS minify enabled.</p>
							<pre><code>gulp --prod</code></pre>

							<p>Run below task to update server side ajax demo API URL fix (required fix for angular and html versions) as defined in
								<code>config.path.demo_api_url</code> right after <code>gulp</code> task completed:</p>
							<pre><code>gulp apiurl</code></pre>

							<p class="alert alert-warning" style="margin: 25px 0 25px 0;">
								In some cases, if the Angular demo folder was moved to other directories,
								<code>gulp</code> command may not work.
								Please use gulp command with flag
								<code>--angular-jquery</code> for the assets compilation.
							</p>
							<pre><code>gulp --prod --angular-jquery</code></pre>
							For the Metronic v5.1 and older version, please use this instead.
							<pre><code>gulp --prod --angular</code></pre>

							<p>Base theme CSS & JS in
								<code>[root]/src/</code>. When you run gulp, all CSS & JS from
								<code>[root]/src/</code> will be compiled and place into several demo locations, for Angular and HTML static.
								The compile output folder is defined in
								<code>[root]/tools/conf/[version_package].json</code> file, under
								<code>config.dist</code>.
								You can create another compile output path.
							</p>
							<pre><code>"dist": [
    "./../theme/dist/preview/assets",
    "./../theme/dist/default/**/assets"
]</code></pre>
						</div>

						<p>Gulp can run automatically when a file changed. Watch tasks file is located in
							<code>[root]/tools/gulp/watch.js</code>.</p>
						<p>To run watcher for all JS and CSS files. Run command below.</p>
						<pre><code>gulp watch</code></pre>
						<p>You also can run watcher separately for JS and CSS.</p>
						<pre><code>gulp watch:js</code></pre>
						<pre><code>gulp watch:scss</code></pre>
					</div>

					<div class="separator"></div>

					<div id="sec5" class="section">
						<h2 class="section-head">Stylesheets</h2>

						<h3 id="sec5-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p>
								Each demo has own base style
								<code>[root]/src/sass/demo/[demo_id]/style.scss</code> that will be compiled and added into the demo's base css bundle
								<code>assets/demo/[demo_id]/base/styles.bundle.css</code>.
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec5-2" class="section-title">Config</h3>
						<div class="section-content">
							<p>
								The demo's
								<code>style.scss</code> includes the entire framework stylesheets and compiles with its own layout and global settings that overrides's Metronic frameworks base global settings. Thus each demo can customize and change the look and feel of the the entire theme components by overriding global config
								<code>[root]/src/sass/framework/_config.scss</code> by the demo level config
								<code>[root]/src/sass/demo/[demo_id]/_framework-config.scss</code>.
							</p>
							<p>
								Metronic uses nested map list to structure the config options with special custom function
								<code>arrat-get()</code> to access the nested config structure.
								Below is the example of the framework's base SASS config:
							</p>

							<div class="space"></div>

							<pre><code class="scss">
//
//** Global Config
//

//== Framework SASS Functions
@import "base/functions";

//== Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$m--layout-breakpoints: (
  	// Small screen / phone
  	sm: 576px,

  	// Medium screen / tablet
  	md: 768px,

  	// Large screen / desktop
  	lg: 992px,

  	// Extra large screen / wide desktop
  	xl: 1200px,

    // Extra large screen / wide desktop
    xxl: 1400px,

    xxxl: 1600px
) !default;

//== Global arrow style
$m--arrow-style: 'smooth'; // supported options: smooth, classic

//== Default skin
$m--default-skin: 'light'; // supported options: light, dark

//== Global rounded border mode
$m--rounded: true;

//== Force cursor with pointer for button tags globally
$m--btn-force-hover-pointer: true;

//== Border Radius
$m--border-radius: (
    general: 4px,
    dropdown: 6px,
    scrollbar: 2px
);

//== Transition
$m--transition: (
    general: all 0.3s,
    link: (
        hover: color .4s ease
    )
);

//== UI State Color
$m--state-colors: (
    // metronic states
    brand: (
        base: #716aca,
        inverse: #ffffff
    ),
    metal: (
        base: #c4c5d6,
        inverse: #111111
    ),
    light: (
        base: #ffffff,
        inverse: #282a3c
    ),
    accent: (
        base: #00c5dc,
        inverse: #ffffff
    ),
    focus: (
        base: #9816f4,
        inverse: #ffffff
    ),

    // bootstrap states
    primary: (
        base: #5867dd,
        inverse: #ffffff
    ),
    success: (
        base: #34bfa3,
        inverse: #ffffff
    ),
    info: (
        base: #36a3f7,
        inverse: #ffffff
    ),
    warning: (
        base: #ffb822,
        inverse: #111111
    ),
    danger: (
        base: #f4516c,
        inverse: #ffffff
    )
);

//== The body element font settings
$m--root-font: (
    size: (
        desktop: 14px,
        tablet: 13px,
        mobile: 13px
    ),
    weight: 300,
    color: (
        light: #333333,
        dark: #efefef
    )
);

//== Best font families
$m--font-families: (
    regular: 'Poppins',
    heading: 'Roboto'
);

//== General link font settings
$m--link-font: (
    default: (
        color: (
            light: get-brand-color(),
            dark: get-brand-color()
        )
    ),

    hover: (
        color: (
            light: get-brand-color('+'),
            dark: get-brand-color('+')
        )
    )
);
							</code>
							</pre>

							<p>
								You can access to an option by using
								<code>array-get()</code> function as shown below:
							</p>

							<pre><code class="scss">$border-radius: array-get($m--border-radius, general); // 4px;
$brand-base-color: array-get($m--state-colors, brand, base); // #716aca
$brand-inverse-color: array-get($m--state-colors, brand, inverse); // #ffffff
</code></pre>

						</div>

						<div class="space"></div>

						<h3 id="sec5-4" class="section-title">Mixins</h3>
						<div class="section-content">
							<p>You can use Metronic's globally available base mixins in your custom codes. All available mixins can be found here:
								<code>src/sass/framework/base/_mixins.scss</code>
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec5-5" class="section-title">Functions</h3>
						<div class="section-content">
							<p>You can use Metronic's globally available SASS functions in your custom codes. All available functions can be found here:
								<code>src/sass/framework/base/_functions.scss</code>
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec5-3" class="section-title">Helper Classes</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Class</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="width: 250px;">
										<code>m--margin-[size]</code><br>
										<code>m--margin-top-[size]</code><br>
										<code>m--margin-bottom-[size]</code><br>
										<code>m--margin-left-[size]</code><br>
										<code>m--margin-right-[size]</code>
									</td>
									<td>Margin helper classes where
										<code>[size]</code> can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example:
										<code>m--margin-10</code>, <code>m--margin-top-20</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--padding-[size]</code><br>
										<code>m--padding-top-[size]</code><br>
										<code>m--padding-bottom-[size]</code><br>
										<code>m--padding-left-[size]</code><br>
										<code>m--padding-right-[size]</code>
									</td>
									<td>Padding helper classes where
										<code>[size]</code> can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example:
										<code>m--padding-10</code>, <code>m--padding-left-20</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--full-height</code>
									</td>
									<td>Set full 100% height helper class.</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--valign-top</code><br>
										<code>m--valign-middle</code><br>
										<code>m--valign-bottom</code><br>
									</td>
									<td>Vertical align the content to top, middle or bottom</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--space-[size]</code>
									</td>
									<td>Space helper classes where
										<code>[size]</code> can accept 5, 10, 15, 20, 30, and 40. Example:
										<code>m--space-10</code>, <code>m--space-20</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--block-center</code>
									</td>
									<td>Helper class to set element centered.</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--align-[alignment]</code>
									</td>
									<td>Alignment helper classes where
										<code>[alignment]</code> can accept right, left and center. Example:
										<code>m--align-right</code>, <code>m--align-center</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--pull-[direction]</code>
									</td>
									<td>Pull element helper classes where
										<code>[direction]</code> can accept right and left. Example:
										<code>m--pull-right</code>, <code>m--pull-left</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--img-rounded</code>
									</td>
									<td>Image rounded border helper class</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--block-inline</code>
									</td>
									<td>Helper class to set element display as inline block.</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--hide</code>
									</td>
									<td>Helper class to hide element.</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--clearfix</code>
									</td>
									<td></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--marginless</code>
									</td>
									<td>Remove margin helper class</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--img-centered</code>
									</td>
									<td>Helper class to set image centered</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--font-transform-u</code><br>
										<code>m--font-transform-l</code><br>
										<code>m--font-transform-c</code><br>
										<code>m--font-transform-i</code><br>
									</td>
									<td>Text transform helper classes.</td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--font-[weight]</code>
									</td>
									<td>Weight helper classes where
										<code>[weight]</code> can accept thin, normal, bold, bolder, boldest and boldest2. Example:
										<code>m--font-thin</code>, <code>m--font-normal</code>,
										<code>m--font-bold</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--[type]-font-size-[size]</code>
									</td>
									<td>Font size helper classes where <code>[type]</code> can accept text and icon.
										<code>[size]</code> can accept lg1, lg2, lg3, lg4, lg5, sm1, sm2, sm3, sm4, and sm5. Example:
										<code>m--icon-font-size-lg3</code>, <code>m--font-normal</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--font-[color]</code><br>
										<code>m--font-inverse-[color]</code><br>
										<code>m--bg-[color]</code><br>
										<code>m--bg-fill-[color]</code><br>
									</td>
									<td>Font and background color helper classes where
										<code>[color]</code> can accept brand, metal, light, accent, focus, primary, success, info, warning and danger. Example:
										<code>m--font-inverse-primary</code>, <code>m--bg-info</code>,
										<code>m--bg-fill-danger</code></td>
								</tr>
								<tr>
									<td style="width: 250px;">
										<code>m--visible-[breakpoint]</code><br>
										<code>m--visible-[breakpoint]-inline-block</code><br>
										<code>m--hidden-[breakpoint]</code><br>
									</td>
									<td>Helper classes to set visible or hidden for responsive breakpoint.
										<code>[breakpoint]</code> can accept sm, md, lg, xl, xxl, xxxl. Example:
										<code>m--visible-sm</code>, <code>m--visible-md-inline-block</code>,
										<code>m--hidden-xl</code></td>
								</tr>
								</tbody>
							</table>
						</div>

					</div>

					<div class="separator"></div>

					<div id="sec6" class="section">
						<h2 class="section-head">Components</h2>

						<h3 id="sec6-1" class="section-title">Util Class</h3>
						<div class="section-content">
							<p>
								<code>Util</code> is Metronic's base utility helper class defined in
								<code>src/js/framework/base/util.js</code> and globally available within the theme.
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec6-2" class="section-title">App Class</h3>
						<div class="section-content">
							<p>
								<code>App</code> is Metronic's base javascript class defined in
								<code>src/js/framework/base/app.js</code> and globally available within the theme that handles all the initializaitons of base components such as bootstrap popover and tooltips, scrollable contents(using Custom Scroll plugin), etc.
							</p>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec14" class="section">
						<h2 class="section-head">Datatable</h2>

						<h3 id="sec14-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>Datatable</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/datatable.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec14-2" class="section-title">Initialization</h3>
						<div class="section-content">

							<p>Below code shows basic initialization of the datatable from element with attribute ID
								<code>m_datatable</code>:</p>
							<pre><code class="html">&#60;div id="m_datatable">&#60;/div&#62;</code></pre>
							<pre><code>var datatable = $('#m_datatable').mDatatable(options);</code></pre>

							<p>You can also init the datatable using the class name. But the ID attribute is required for the datatable session state such as pagination, query, etc. Datatable save state can be disabled if don't require.</p>
							<pre><code class="html">&#60;div class="my_datatable" id="m_datatable">&#60;/div&#62;</code></pre>
							<pre><code>var datatable = $('.my_datatable').mDatatable(options);</code></pre>

							<pre><code class="js">var options = {
    data: {
        type: 'remote',
        source: {
            read: {
                url: 'inc/api/datatables/demos/orders.php',
                method: 'GET',
                // custom headers
                headers: { 'x-my-custom-header': 'some value', 'x-test-header': 'the value'},
                params: {
                    // custom parameters
                    generalSearch: '',
                    EmployeeID: 1,
                    someParam: 'someValue',
                    token: 'token-value'
                },
                map: function(raw) {
                    // sample data mapping
                    var dataSet = raw;
                    if (typeof raw.data !== 'undefined') {
                         dataSet = raw.data;
                    }
                    return dataSet;
                },
            }
        },
        pageSize: 10,
        saveState: {
            cookie: true,
            webstorage: true
        },

        serverPaging: false,
        serverFiltering: false,
        serverSorting: false
        autoColumns: false
    },

    layout: {
        theme: 'default',
        class: 'm-datatable--brand',
        scroll: false,
        height: null,
        footer: false,
        header: true,

        smoothScroll: {
            scrollbarShown: true
        },

        spinner: {
            overlayColor: '#000000',
            opacity: 0,
            type: 'loader',
            state: 'brand',
            message: true
        },

        icons: {
            sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
            pagination: {
                next: 'la la-angle-right',
                prev: 'la la-angle-left',
                first: 'la la-angle-double-left',
                last: 'la la-angle-double-right',
                more: 'la la-ellipsis-h'
            },
            rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
        }
    },

    sortable: false,

    pagination: true,

    search: {
      // enable trigger search by keyup enter
      onEnter: false,
      // input text for search
      input: $('#generalSearch'),
      // search delay in milliseconds
      delay: 400,
    },

    detail: {
        title: 'Load sub table',
        content: function (e) {
            // e.data
            // e.detailCell
        }
    },

    rows: {
      callback: function() {},
      // auto hide columns, if rows overflow. work on non locked columns
      autoHide: false,
    },

    // columns definition
    columns: [{
        field: "RecordID",
        title: "#",
        locked: {left: 'xl'},
        sortable: false,
        width: 40,
        selector: {class: 'm-checkbox--solid m-checkbox--brand'}
    }, {
        field: "OrderID",
        title: "Order ID",
        sortable: 'asc',
        filterable: false,
        width: 150,
        responsive: {visible: 'lg'},
        locked: {left: 'xl'},
        template: '{{OrderID}} - {{ShipCountry}}'
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        template: function (row) {
            return row.ShipCountry + ' - ' + row.ShipCity;
        }
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        sortCallback: function (data, sort, column) {
            var field = column['field'];
            return $(data).sort(function (a, b) {
                var aField = a[field];
                var bField = b[field];
                if (sort === 'asc') {
                    return parseFloat(aField) > parseFloat(bField)
                        ? 1 : parseFloat(aField) < parseFloat(bField)
                            ? -1
                            : 0;
                } else {
                    return parseFloat(aField) < parseFloat(bField)
                        ? 1 : parseFloat(aField) > parseFloat(bField)
                            ? -1
                            : 0;
                }
            });
        }
    }],

    toolbar: {
        layout: ['pagination', 'info'],

        placement: ['bottom'],  //'top', 'bottom'

        items: {
            pagination: {
                type: 'default',

                pages: {
                    desktop: {
                        layout: 'default',
                        pagesNumber: 6
                    },
                    tablet: {
                        layout: 'default',
                        pagesNumber: 3
                    },
                    mobile: {
                        layout: 'compact'
                    }
                },

                navigation: {
                    prev: true,
                    next: true,
                    first: true,
                    last: true
                },

                pageSizeSelect: [10, 20, 30, 50, 100]
            },

            info: true
        }
    },

    translate: {
        records: {
            processing: 'Please wait...',
            noRecords: 'No records found'
        },
        toolbar: {
            pagination: {
                items: {
                    default: {
                        first: 'First',
                        prev: 'Previous',
                        next: 'Next',
                        last: 'Last',
                        more: 'More pages',
                        input: 'Page number',
                        select: 'Select page size'
                    },
                    info: 'Displaying {{start}} - {{end}} of {{total}} records'
                }
            }
        }
    }
}
</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec14-3" class="section-title">Options</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>data.type</code></td>
									<td nowrap><code>string</code></td>
									<td>Required. Set type to <code>remote</code> for remote data get public URL.
										<code>local</code> is for local data predefined in variable.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>type: 'remote'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.source.read.url</code></td>
									<td nowrap><code>string</code></td>
									<td>If <code>data.type</code> is defined as
										<code>remote</code>. Type of remote datasource can be static or dynamic.
										For the static datasource you can define static JSON file URL. And for dynamic datasource with pagination, sorting and filtering need to be defined as above sample.
										<code>url</code> is required, and <code>params</code> object is optional.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>url: 'inc/api/datatables/demos/orders.php'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.source.read.method</code></td>
									<td nowrap><code>string</code></td>
									<td>Request method for ajax request. The value can be <code>GET</code> or
										<code>POST</code>.
										The default value is <code>POST</code>.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>method: 'GET'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.source.read.headers</code></td>
									<td nowrap><code>object</code></td>
									<td>Headers parameter object will be sent along in the datatable API request headers.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">headers: {
    'x-my-custom-header': 'some value',
    'x-test-header': 'the value'
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.source.read.params</code></td>
									<td nowrap><code>object</code></td>
									<td>Your own API may requires some parameter to call for getting the data. E.g. token, search keywords, IDs, etc. This query parameters object will be sent along in the datatable API request.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">params: {
  generalSearch: '',
  EmployeeID: 1
  token: 'tokenvalue'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.source.read.map</code></td>
									<td nowrap><code>function</code></td>
									<td>Custom mapping the received data into datatable grid.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">map: function(raw) {
  // sample data mapping
  var dataSet = raw;
  if (typeof raw.data !== 'undefined') {
	dataSet = raw.data;
  }
  return dataSet;
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.source.read.timeout</code></td>
									<td nowrap><code>number</code></td>
									<td>Number of milliseconds before the request ended. Default is 30000, equal to 30 seconds.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>timeout: 30000</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.pageSize</code></td>
									<td nowrap><code>number</code></td>
									<td>Define page size of data for each request. Default value is 10.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>pageSize: 10</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.saveState.cookie</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Set true or false to enable/disable datatable state to save in
										<code>cookie</code>. Default value is true.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>cookie: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.saveState.webstorage</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Set true or false to enable/disable datatable state to save in
										<code>webstorage</code>. Default value is true.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>webstorage: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.serverPaging</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable pagination in server side. Only applied for the
										<code>remote</code> data.type.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>serverPaging: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.serverFiltering</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable filtering in server side. Only applied for the
										<code>remote</code> data.type.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>serverFiltering: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.serverSorting</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable sorting in server side. Only applied for the
										<code>remote</code> data.type.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">serverSorting: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>data.autoColumns</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable auto create columns. By enabling this, the datatable will automatically create all available data in an object.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">autoColumns: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="3" class="force-border">Layout</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>layout.theme</code></td>
									<td nowrap><code>string</code></td>
									<td>Define which class of theme to apply into datatable.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>theme: 'default'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.class</code></td>
									<td nowrap><code>string</code></td>
									<td>Custom class to add into datatable.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">class: 'm-datatable--brand'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.scroll</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable scroll.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">scroll: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.height</code></td>
									<td nowrap><code>string</code></td>
									<td>Define fixed height for the datatable.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">height: 300</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.footer</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable footer.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">footer: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.header</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable header.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">header: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.smoothScroll<br>.scrollbarShown</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable smooth scroll with the scroll bar.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">smoothScroll: {
  scrollbarShown: true
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.spinner.overlayColor</code></td>
									<td nowrap><code>string</code></td>
									<td>Spinner background overlay color.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">overlayColor: '#000000'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.spinner.opacity</code></td>
									<td nowrap><code>number</code></td>
									<td>Spinner background opacity.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">opacity: 0</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.spinner.type</code></td>
									<td nowrap><code>string</code></td>
									<td>Spinner type.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">type: 'loader'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.spinner.state</code></td>
									<td nowrap><code>string</code></td>
									<td>Spinner state style. Default to brand.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">state: 'brand'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.spinner.message</code></td>
									<td nowrap><code>boolean</code><br><code>string</code></td>
									<td>Enable/disable loading message during spinner is active. Set boolean or text string message.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">message: true</code></pre>
													<pre><code class="js">message: 'Loading..'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.icons.sort</code></td>
									<td nowrap><code>object</code></td>
									<td>Options config for the icons class for sorting icon ascending and descending.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">sort: {
  asc: 'la la-arrow-up',
  desc: 'la la-arrow-down'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.icons.pagination</code></td>
									<td nowrap><code>object</code></td>
									<td>Icons for pagination buttons.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">pagination: {
  next: 'la la-angle-right',
  prev: 'la la-angle-left',
  first: 'la la-angle-double-left',
  last: 'la la-angle-double-right',
  more: 'la la-ellipsis-h'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>layout.icons.rowDetail</code></td>
									<td nowrap><code>object</code></td>
									<td>rowDetail is for expand and collapse icon for table with child table.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">rowDetail: {
  expand: 'fa fa-caret-down',
  collapse: 'fa fa-caret-right'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="3" class="force-border">Others</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>sortable</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable columns sortable globally.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">sortable: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>pagination</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable pagination globally.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">pagination: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>search.onEnter</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Set the search input keyup event to enter. The internal search will be triggered using
										<code>Enter</code> button. Set false to trigger search on keyup any buttons.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">search: {
   onEnter: true,
},
</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>search.input</code></td>
									<td nowrap><code>jQuery</code></td>
									<td>Pass the jQuery element of input. The datatable will add onKeyup event to the input to trigger the internal search filter the data that already in the table.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">search: {
   input: $('#generalSearch'),
},
</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>search.delay</code></td>
									<td nowrap><code>number</code></td>
									<td>Control the speed of search and data load request to reduce the search call frequency automatically. Default value is 400ms.
										Set the number of milliseconds.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">search: {
  // search delay in milliseconds
  delay: 400,
},
</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="3" class="force-border">Toolbar</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>toolbar.layout</code></td>
									<td nowrap><code>array</code></td>
									<td>Set the order of pagination and info by array index.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">layout: ['pagination', 'info']</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.placement</code></td>
									<td nowrap><code>array</code></td>
									<td>An array list of placement for pagination buttons. Can be multiple values. Set the pagination placement to bottom or top.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">placement: ['bottom']</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.items<br>.pagination.type</code></td>
									<td nowrap><code>string</code></td>
									<td>Pagination type.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">type: 'default'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.items<br>.pagination.pages.desktop</code></td>
									<td nowrap><code>object</code></td>
									<td>Pagination pages responsive config for desktop. An object that contains layout and pagesNumber.<br>
										Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">desktop: {
  layout: 'default',
  pagesNumber: 6
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.items<br>.pagination.pages.tablet</code></td>
									<td nowrap><code>object</code></td>
									<td>Pagination pages responsive config for tablet. An object that contains layout and pagesNumber.<br>
										Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">tablet: {
  layout: 'default',
  pagesNumber: 3
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.items<br>.pagination.pages.mobile</code></td>
									<td nowrap><code>object</code></td>
									<td>Pagination pages responsive config for mobile. Default value for layout is compact.
										Layout compact type do not have to specify pagesNumber.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">mobile: {
  layout: 'compact'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.items<br>.pagination.navigation</code></td>
									<td nowrap><code>object</code></td>
									<td>Enable/disable pagination buttons for prev, next, first, last.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">navigation: {
  prev: true,
  next: true,
  first: true,
  last: true
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.items<br>.pagination.pageSizeSelect</code></td>
									<td nowrap><code>array</code></td>
									<td>Array of Number for select size dropdown to select pagination size. -1 is used for "All" option.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">pageSizeSelect: [10, 20, 30, 50, 100]</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toolbar.items.info</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable display of records and pagination info.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>info: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="3" class="force-border">Translate</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>translate.records.processing</code></td>
									<td nowrap><code>string</code></td>
									<td>Translation for records loading during spinner is active.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>processing: 'Please wait...'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>translate.records.noRecords</code></td>
									<td nowrap><code>string</code></td>
									<td>Translation for no records message.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>noRecords: 'No records found'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>translate.toolbar<br>.pagination.items.default</code></td>
									<td nowrap><code>object</code></td>
									<td>Translation for pagination. Contains key for first, prev, next, last, more, input, select.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">default: {
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',
  more: 'More pages',
  input: 'Page number',
  select: 'Select page size'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>translate.toolbar<br>.pagination.items.info</code></td>
									<td nowrap><code>string</code></td>
									<td>Translation for info template.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>info: 'Displaying {{start}} - {{end}} of {{total}} records'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="4" class="force-border">Detail</th>
									<td></td>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>detail.title</code></td>
									<td nowrap><code>string</code></td>
									<td>Sub table title.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">title: 'Load sub table'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>detail.content</code></td>
									<td nowrap><code>object</code></td>
									<td>A callback function of
										<code>Datatable</code> instance as a sub table of each record. The callback has one parameter which you can access the row data
										<code>event.data</code> and child table element in
										<code>event.detailCell</code>.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code>content: function (event) {
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="3" class="force-border">Rows</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>rows</code></td>
									<td nowrap><code>object</code></td>
									<td>An array of columns with options object for each column. First column should be define as a unique key for each records.</td>
								</tr>
								<tr>
									<td nowrap><code>rows.callback</code></td>
									<td nowrap><code>string</code></td>
									<td>Row callback. <code>Deprecated in v5.0.6</code>
										Please use <code>rows.beforeTemplate</code> instead.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>callback: function (row, data, index) {
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>rows.beforeTemplate</code></td>
									<td nowrap><code>string</code></td>
									<td>Row callback that call before template being rendered. Receive 3 params which are the row jQuery element, the row data and row number index.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>beforeTemplate: function (row, data, index) {
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>rows.afterTemplate</code></td>
									<td nowrap><code>string</code></td>
									<td>Row callback that call after rows has been rendered. Receive 3 params which are the row jQuery element, the row data and row number index.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>afterTemplate: function (row, data, index) {
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>rows.autoHide</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Auto hide columns which are overflow in a row

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>autoHide: true,</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								<thead>
								<tr>
									<th colspan="3" class="force-border">Columns</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>columns</code></td>
									<td nowrap><code>array</code></td>
									<td>An array of columns with options object for each column. First column should be define as a unique key for each records.</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].field</code></td>
									<td nowrap><code>string</code></td>
									<td>Required. The field name of column.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>field: 'ColumnName'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].title</code></td>
									<td nowrap><code>string</code></td>
									<td>Required. The title name and will be displayed as header or footer.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>title: 'Column Name'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].sortable</code></td>
									<td nowrap><code>boolean</code></td>
									<td>Enable/disable sort feature for the column.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">sortable: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].width</code></td>
									<td nowrap><code>number</code></td>
									<td>The width size of cells under this column.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">width: 40</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].textAlign</code></td>
									<td nowrap><code>string</code></td>
									<td>The alignment of cells text under this column.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">textAlign: 'center'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].template</code></td>
									<td nowrap><code>function</code><br><code>string</code></td>
									<td>A callback function support for column rendering and recieve a parameter object of current row's value.
										Can be also a string with placeholder and define with field name {{field}}.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">template: function (row) {
  return '<span>' + row.OrderID + '</span>';
}</code></pre>
													<pre><code>template: '{{OrderID}}'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].sortCallback</code></td>
									<td nowrap><code>function</code><br><code>string</code></td>
									<td>A callback function support for custom sorting.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>data</code></td>
												<td nowrap><code>object</code></td>
												<td>
													JSON string array of original data for sorting
												</td>
											</tr>
											<tr>
												<td nowrap><code>sort</code></td>
												<td nowrap><code>string</code></td>
												<td>
													Sorting type of <code>asc</code> for ascending or
													<code>desc</code> for descending.
												</td>
											</tr>
											<tr>
												<td nowrap><code>column</code></td>
												<td nowrap><code>object</code></td>
												<td>
													Column config object
												</td>
											</tr>
											</tbody>
										</table>

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">sortCallback: function (data, sort, column) {
    var field = column['field'];
    return $(data).sort(function (a, b) {
        var aField = a[field];
        var bField = b[field];
        if (sort === 'asc') {
            return parseFloat(aField) > parseFloat(bField)
                ? 1 : parseFloat(aField) < parseFloat(bField)
                    ? -1
                    : 0;
        } else {
            return parseFloat(aField) < parseFloat(bField)
                ? 1 : parseFloat(aField) > parseFloat(bField)
                    ? -1
                    : 0;
        }
    });
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].overflow</code></td>
									<td nowrap><code>string</code></td>
									<td>CSS overflow value.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">overflow: 'visible'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].responsive</code></td>
									<td nowrap><code>object</code></td>
									<td>Set visible or invisible for each responsive breakpoint.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">responsive: {
  visible: 'md',
  hidden: 'lg'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].selector</code></td>
									<td nowrap><code>object</code></td>
									<td>Enable column as selector (checkbox only with no text) and provide custom
										<code>class</code> name.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
										<pre><code class="js">selector: {
  class: 'm-checkbox--solid'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>columns[ColName].locked</code></td>
									<td nowrap><code>object</code></td>
									<td>Set the column to which side to be locked or static. Set object with which side left/right as key and the value is which responsive breakpoint to lock.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">locked: {left: 'xl'}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec14-4" class="section-title">Events</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-init</code></td>
									<td>
										Initialization of table.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td>Datatable ID and initialized options.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-destroy</code></td>
									<td>
										On datatable destroyed.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-layout-updated</code>
									</td>
									<td>
										Event that will be triggered on layout rendering update and resizing datatable.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>args</code></td>
												<td nowrap><code>object</code></td>
												<td>Provide table parameters, eg. datatable ID attribute</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-ajax-done</code></td>
									<td>
										After ajax request is completed.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>data</code></td>
												<td nowrap><code>object</code></td>
												<td>List of all records.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-ajax-fail</code></td>
									<td>
										Ajax request is failed.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>jqXHR</code></td>
												<td nowrap><code>object</code></td>
												<td>jQuery XMLHttpRequest from jQuery request, include error details.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-goto-page</code></td>
									<td>
										Navigate to any page number.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>args</code></td>
												<td nowrap><code>object</code></td>
												<td>Page details.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-update-perpage</code>
									</td>
									<td>
										Update page size.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>args</code></td>
												<td nowrap><code>object</code></td>
												<td>Page details.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-reloaded</code></td>
									<td>
										Reload datatable.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-check</code></td>
									<td>
										On check checkbox selector.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>args</code></td>
												<td nowrap><code>object</code></td>
												<td>Checked records details.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-uncheck</code></td>
									<td>
										On uncheck checkbox selector.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>args</code></td>
												<td nowrap><code>object</code></td>
												<td>Unchecked records details.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>m-datatable--on-sort</code></td>
									<td>
										Sorting datatable.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>event</code></td>
												<td nowrap><code>object</code></td>
												<td>Default event object.</td>
											</tr>
											<tr>
												<td nowrap><code>args</code></td>
												<td nowrap><code>object</code></td>
												<td>Sorting details. Eg. field and sort type of asc or desc.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec14-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="vertical-align: top;"><code>datatable.load()</code></td>
									<td>
										Load datatable datasource. Same function with datatable.reload().
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.reload()</code></td>
									<td>
										Reload datatable datasource and rerender the table.
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.destroy()</code></td>
									<td>
										Destroy the datatable instance and revert the HTML.
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getRecord(id)</code></td>
									<td>
										Select record in the datatable by ID. ID is refers to the value of first column.
										Use with chaining methods <code>datatable.getColumn(columnName)</code>

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>id</code></td>
												<td nowrap><code>string</code></td>
												<td>
													ID is refers to the first columns value of each rows.
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getColumn(columnName)</code>
									</td>
									<td>
										Get column by column name.
										Use with chaining methods
										<code>datatable.getValue()</code> to get a cell value.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>columnName</code></td>
												<td nowrap><code>string</code></td>
												<td>
													Column name as defined in datatable options init
													<code>columns[ColName].field</code>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getValue()</code></td>
									<td>
										Get selected records values as string.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Returns</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>string</code></td>
											</tr>
											</tbody>
										</table>

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code class="js">datatable.getRecord(1).getColumn('columnName').getValue();</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.sort(columnName, sort)</code>
									</td>
									<td>
										Sort datatable by columnName field. Sort by ascending or descending.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>columnName</code></td>
												<td nowrap><code>string</code></td>
												<td>
													Column name as defined in datatable options init
													<code>columns[ColName].field</code>
												</td>
											</tr>
											<tr>
												<td nowrap><code>sort</code></td>
												<td nowrap><code>string</code></td>
												<td>
													Sort type to ascending or descending, can accept value asc and desc.
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.setActive(cell)</code></td>
									<td>
										Set datatable selector checkbox to active state.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>cell</code></td>
												<td nowrap><code>string</code></td>
												<td>Cell is a string of selector checkbox value.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.setInactive(cell)</code></td>
									<td>
										Set datatable selector checkbox to inactive state.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>cell</code></td>
												<td nowrap><code>string</code></td>
												<td>Cell is a string of checkbox value.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.setActiveAll(active)</code>
									</td>
									<td>
										Set datatable selector checkbox active/inactive for all records.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>active</code></td>
												<td nowrap><code>boolean</code></td>
												<td>Set records selector active or inactive state by pass the boolean true or false.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.setSelectedRecords()</code>
									</td>
									<td><p><code>Deprecated in v5.0.6</code></p>
										Set selected selector checkbox.
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getSelectedRecords()</code>
									</td>
									<td>
										Get selected records.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Returns</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>jQuery element of selected record rows.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.search(value, column)</code>
									</td>
									<td>
										Execute search method to filter datatable records.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>value</code></td>
												<td nowrap><code>string</code></td>
												<td>Value to filter.</td>
											</tr>
											<tr>
												<td nowrap><code>column</code></td>
												<td nowrap><code>string</code></td>
												<td>Column field name which defined in options config.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;">
										<code>datatable.setDataSourceParam(param, value)</code></td>
									<td>
										Modify the datasource parameters and save it in datatable state.
										Must be call
										<code>datatable.load()</code> to load new modified datasource and rerender table.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>param</code></td>
												<td nowrap><code>string</code></td>
												<td>Param key value. Can accept pagination, sort, query.</td>
											</tr>
											<tr>
												<td nowrap><code>value</code></td>
												<td nowrap><code>string</code></td>
												<td>The string value of param.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;">
										<code>datatable.getDataSourceParam(param)</code></td>
									<td>
										Get current datasource parameters by param type of pagination, sort, or query.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>param</code></td>
												<td nowrap><code>string</code></td>
												<td>Param key value. Can accept pagination, sort, query.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getDataSourceQuery()</code>
									</td>
									<td>
										A helper function shortcut to
										<code>datatable.getDataSourceParam('query')</code>.
										Get current query datasource parameter.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Returns</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td><pre><code class="js">{
  pagination: {
    field: "ShipDate",
    page: 1,
    pages: 18,
    perpage: 20,
    sort: "asc",
    total: 350
  },
  query: {
  },
  sort: {
    sort: "asc",
    field: "ShipDate"
  }
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getCurrentPage()</code></td>
									<td>Get current selected page number

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Returns</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>number</code></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getPageSize()</code></td>
									<td>
										Get current selected page size number.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Returns</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>number</code></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.getTotalRows()</code></td>
									<td>
										Get total rows of record.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Returns</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>number</code></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.hideColumn(columnName)</code>
									</td>
									<td><p><code>Deprecated in v5.0.6</code></p>
										Hide column by column's field name.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>fieldName</code></td>
												<td nowrap><code>string</code></td>
												<td>Field name of the column defined in initialized options.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.showColumn(columnName)</code>
									</td>
									<td><p><code>Deprecated in v5.0.6</code></p>
										Show column by column's field name.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>fieldName</code></td>
												<td nowrap><code>string</code></td>
												<td>Field name of the column defined in initialized options.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.table()</code></td>
									<td>
										Return the jQuery element of the table
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.row(selector)</code></td>
									<td>
										Select a single row from the table by css selector. The method return datatable instance.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>selector</code></td>
												<td nowrap><code>string</code></td>
												<td>Class name, id attribute or tag name.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.rows(selector)</code></td>
									<td>
										Select multiple rows from the table by css selector. The method return datatable instance.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>selector</code></td>
												<td nowrap><code>string</code></td>
												<td>Class name, id attribute or tag name.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.column(index)</code></td>
									<td>
										Select a single column from the table index. The method return datatable instance.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>index</code></td>
												<td nowrap><code>number</code></td>
												<td>Zero-based index number.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.columns(selector)</code></td>
									<td>
										Select multiple columns from the table by css selector. The method return datatable instance.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>selector</code></td>
												<td nowrap><code>string</code></td>
												<td>Class name, id attribute or tag name.</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.remove()</code></td>
									<td>
										Delete selected a single row or multiples rows.<br>
										Can be used after selector methods <code>row(selector)</code> or
										<code>rows(selector)</code>.
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.visible(visibility)</code></td>
									<td>
										Set the visibility of selected rows or columns. <br>
										Can be used after selector methods <code>row(selector)</code> or
										<code>rows(selector)</code>.

										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>visibility</code></td>
												<td nowrap><code>boolean</code></td>
												<td>Set <code>true</code> to visible, and
													<code>false</code> to hide.
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>datatable.nodes()</code></td>
									<td>
										Return nodes of the selected rows or columns.<br>
										Can be used after selector methods <code>row(selector)</code> or
										<code>rows(selector)</code>.
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec14-6" class="section-title">Ajax Response</h3>
						<div class="section-content">
							<p>Below is the sample ajax response from back-end for the remote source datatable.</p>

							<div class="space"></div>

							<pre><code>{
    "meta": {
        "page": 1,
        "pages": 35,
        "perpage": 10,
        "total": 350,
        "sort": "asc",
        "field": "ShipDate"
    },
    "data": [
        {
            "RecordID": 10,
            "OrderID": "55154-5393",
            "ShipCountry": "NG",
            "ShipCity": "Sapele",
            "ShipName": "Moen, Kertzmann and Mills",
            "ShipAddress": "1 Nancy Junction",
            "CompanyEmail": "epere9@sina.com.cn",
            "CompanyAgent": "Ely Pere",
            "CompanyName": "Jacobi, O'Conner and Kuhlman",
            "Currency": "NGN",
            "Notes": "adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula",
            "Department": "Shoes",
            "Website": "whitehouse.gov",
            "Latitude": 5.8750769,
            "Longitude": 5.6931356,
            "ShipDate": "1\/1\/2016",
            "PaymentDate": "2017-06-20 10:42:35",
            "TimeZone": "Africa\/Lagos",
            "Status": 3,
            "Type": 1,
            "TotalPayment": "88,211.68 NGN"
        },
        {
            "RecordID": 263,
            "OrderID": "43406-0032",
            "ShipCountry": "US",
            "ShipCity": "Fort Pierce",
            "ShipName": "Moore-Schaden",
            "ShipAddress": "451 Fuller Junction",
            "CompanyEmail": "tdefau7a@google.pl",
            "CompanyAgent": "Tristan Defau",
            "CompanyName": "Mayer and Sons",
            "Currency": "USD",
            "Notes": "mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus",
            "Department": "Music",
            "Website": "cornell.edu",
            "Latitude": 27.3980151,
            "Longitude": -80.3714326,
            "ShipDate": "1\/1\/2017",
            "PaymentDate": "2017-05-21 01:45:57",
            "TimeZone": "America\/New_York",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "7,105.23 USD"
        },
        {
            "RecordID": 77,
            "OrderID": "68016-527",
            "ShipCountry": "PH",
            "ShipCity": "Batarasa",
            "ShipName": "Gibson Inc",
            "ShipAddress": "948 Roxbury Center",
            "CompanyEmail": "smatitiaho24@dailymotion.com",
            "CompanyAgent": "Skippy Matitiaho",
            "CompanyName": "Monahan, Haley and Murphy",
            "Currency": "PHP",
            "Notes": "sit amet consectetuer adipiscing elit proin risus praesent lectus vestibulum quam sapien varius",
            "Department": "Jewelery",
            "Website": "printfriendly.com",
            "Latitude": 8.5015747,
            "Longitude": 117.3557854,
            "ShipDate": "1\/12\/2017",
            "PaymentDate": "2016-09-07 16:34:55",
            "TimeZone": "Asia\/Manila",
            "Status": 1,
            "Type": 3,
            "TotalPayment": "9,541.82 PHP"
        },
        {
            "RecordID": 330,
            "OrderID": "54868-5303",
            "ShipCountry": "PH",
            "ShipCity": "Sillon",
            "ShipName": "Balistreri Group",
            "ShipAddress": "8203 Truax Center",
            "CompanyEmail": "kvickarman95@storify.com",
            "CompanyAgent": "Kipp Vickarman",
            "CompanyName": "Kerluke and Sons",
            "Currency": "PHP",
            "Notes": "lobortis ligula sit amet eleifend pede libero quis orci nullam molestie",
            "Department": "Clothing",
            "Website": "vkontakte.ru",
            "Latitude": 11.186148,
            "Longitude": 123.7487563,
            "ShipDate": "1\/14\/2017",
            "PaymentDate": "2017-05-16 18:29:45",
            "TimeZone": "Asia\/Manila",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "8,300.97 PHP"
        },
        {
            "RecordID": 51,
            "OrderID": "49884-659",
            "ShipCountry": "ID",
            "ShipCity": "Atap",
            "ShipName": "Blanda Group",
            "ShipAddress": "1 Monica Alley",
            "CompanyEmail": "sjackes1e@reuters.com",
            "CompanyAgent": "Shelagh Jackes",
            "CompanyName": "Schiller Inc",
            "Currency": "IDR",
            "Notes": "iaculis justo in hac habitasse platea dictumst etiam faucibus cursus",
            "Department": "Jewelery",
            "Website": "forbes.com",
            "Latitude": 3.8152026,
            "Longitude": 117.1147095,
            "ShipDate": "1\/15\/2016",
            "PaymentDate": "2016-06-24 03:01:19",
            "TimeZone": "Asia\/Makassar",
            "Status": 2,
            "Type": 1,
            "TotalPayment": "8,397.18 IDR"
        },
        {
            "RecordID": 313,
            "OrderID": "23155-179",
            "ShipCountry": "PA",
            "ShipCity": "Potrero Grande",
            "ShipName": "Olson, Schmeler and Little",
            "ShipAddress": "3 Bartillon Place",
            "CompanyEmail": "cgrandison8o@auda.org.au",
            "CompanyAgent": "Corliss Grandison",
            "CompanyName": "Mills-Beatty",
            "Currency": "PAB",
            "Notes": "egestas metus aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend",
            "Department": "Clothing",
            "Website": "mlb.com",
            "Latitude": 8.881634,
            "Longitude": -79.8268729,
            "ShipDate": "1\/16\/2016",
            "PaymentDate": "2017-12-06 10:30:59",
            "TimeZone": "America\/Panama",
            "Status": 3,
            "Type": 2,
            "TotalPayment": "85,706.89 PAB"
        },
        {
            "RecordID": 153,
            "OrderID": "53341-515",
            "ShipCountry": "MD",
            "ShipCity": "Saharna",
            "ShipName": "Leffler, Sawayn and Denesik",
            "ShipAddress": "07247 Del Sol Hill",
            "CompanyEmail": "fshank48@spotify.com",
            "CompanyAgent": "Findley Shank",
            "CompanyName": "Reilly LLC",
            "Currency": "MDL",
            "Notes": "dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo",
            "Department": "Industrial",
            "Website": "discuz.net",
            "Latitude": 47.6949791,
            "Longitude": 28.9654659,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2017-01-05 15:53:50",
            "TimeZone": "Europe\/Chisinau",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "993,295.17 MDL"
        },
        {
            "RecordID": 112,
            "OrderID": "50580-198",
            "ShipCountry": "PT",
            "ShipCity": "Loureiro",
            "ShipName": "Labadie, Hegmann and Jones",
            "ShipAddress": "9986 Arapahoe Place",
            "CompanyEmail": "bglaister33@bbb.org",
            "CompanyAgent": "Baxie Glaister",
            "CompanyName": "Stark, Haley and Koepp",
            "Currency": "EUR",
            "Notes": "suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas",
            "Department": "Tools",
            "Website": "apple.com",
            "Latitude": 41.4808684,
            "Longitude": -8.3624629,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-04-24 01:53:42",
            "TimeZone": "Europe\/Lisbon",
            "Status": 3,
            "Type": 3,
            "TotalPayment": "9,705.78 EUR"
        },
        {
            "RecordID": 29,
            "OrderID": "30142-106",
            "ShipCountry": "RU",
            "ShipCity": "Loukhi",
            "ShipName": "Klein-Streich",
            "ShipAddress": "61 Cascade Plaza",
            "CompanyEmail": "mgallamores@businesswire.com",
            "CompanyAgent": "Minor Gallamore",
            "CompanyName": "Huels-Strosin",
            "Currency": "RUB",
            "Notes": "sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique",
            "Department": "Beauty",
            "Website": "epa.gov",
            "Latitude": 66.0733463,
            "Longitude": 33.0544476,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-03-09 04:40:38",
            "TimeZone": "Europe\/Moscow",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "931,956.17 RUB"
        },
        {
            "RecordID": 135,
            "OrderID": "49348-387",
            "ShipCountry": "FR",
            "ShipCity": "Sens",
            "ShipName": "Collins, Hackett and Vandervort",
            "ShipAddress": "594 Hanover Crossing",
            "CompanyEmail": "tkiezler3q@live.com",
            "CompanyAgent": "Tommy Kiezler",
            "CompanyName": "Eichmann and Sons",
            "Currency": "EUR",
            "Notes": "etiam faucibus cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi",
            "Department": "Toys",
            "Website": "instagram.com",
            "Latitude": 48.1903349,
            "Longitude": 3.2995005,
            "ShipDate": "1\/18\/2017",
            "PaymentDate": "2016-12-28 03:56:57",
            "TimeZone": "Europe\/Paris",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "811,814.44 EUR"
        }
    ]
}</code></pre>

							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th>Field</th>
									<th>Type</th>
									<th>Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>meta</code></td>
									<td nowrap><code>object</code></td>
									<td>Meta object should contain the metadata that required for the datatable pagination to work.</td>
								</tr>
								<tr>
									<td nowrap><code>meta.page</code></td>
									<td nowrap><code>number</code></td>
									<td>The current page number.</td>
								</tr>
								<tr>
									<td nowrap><code>meta.pages</code></td>
									<td nowrap><code>number</code></td>
									<td>Total number of pages available in the server.</td>
								</tr>
								<tr>
									<td nowrap><code>meta.perpage</code></td>
									<td nowrap><code>number</code></td>
									<td>Total records per page.</td>
								</tr>
								<tr>
									<td nowrap><code>meta.total</code></td>
									<td nowrap><code>number</code></td>
									<td>Total all records number available in the server</td>
								</tr>
								<tr>
									<td nowrap><code>meta.sort</code></td>
									<td nowrap><code>string</code></td>
									<td>Sort type <code>asc</code> for ascending and <code>desc</code> for descending.
									</td>
								</tr>
								<tr>
									<td nowrap><code>meta.field</code></td>
									<td nowrap><code>string</code></td>
									<td>Field name which the sort should be applied to.</td>
								</tr>
								<tr>
									<td nowrap><code>data</code></td>
									<td nowrap><code>array</code></td>
									<td>Array of objects.</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec14-7" class="section-title">Angular Datatable</h3>
						<div class="section-content">
							<p class="alert alert-warning" style="margin: 25px 0 25px 0;">Datatable has no full native Angular directive at the moment. But you can initilize it by jQuery.</p>
							<p>To initialize <code>Datatable</code> in Angular, init under
								<code>ngAfterViewInit</code> or
								<code>ngOnInit</code> Angular hook function and cast jQuery element object with
								<code>&#60;any&#62;</code>.</p>
							<pre><code>ngAfterViewInit() {
    let datatable = (&#60;any&#62;$('#m_datatable')).mDatatable(options);
}</code></pre>
							<pre><code>ngOnInit() {
    let datatable = (&#60;any&#62;$('#m_datatable')).mDatatable(options);
}</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec14-8" class="section-title">Extensions</h3>
						<div class="section-content">
							The datatable can be enhanced by extensions, which give new user interaction and configuration options.

							<div class="space"></div>

							<h5>Checkbox</h5>
							Checkbox extension is use for the checkbox selector logic. Below is the default options.

							<div class="space"></div>
							<pre><code>var datatableOptions = {
   ...
   extensions: {
      checkbox: {
         vars: {
           selectedAllRows: 'selectedAllRows',
           requestIds: 'requestIds',
           rowIds: 'meta.rowIds',
         },
      },
   }
   ...
};</code></pre>

							<table class="table-list">
								<thead>
								<tr>
									<th>Field</th>
									<th>Type</th>
									<th>Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>vars.selectedAllRows</code></td>
									<td nowrap><code>string</code></td>
									<td>Flag params for selected all rows, to be sent to the server in the request.</td>
								</tr>
								<tr>
									<td nowrap><code>vars.requestIds</code></td>
									<td nowrap><code>string</code></td>
									<td>Enable to request the all rows IDs from server.</td>
								</tr>
								<tr>
									<td nowrap><code>vars.rowIds</code></td>
									<td nowrap><code>string</code></td>
									<td>Response path for all rows IDs in the server response.</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec15" class="section">
						<h2 class="section-head">Menu</h2>

						<h3 id="sec15-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mMenu</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/menu.js</code>.</p>
							<p>
								The Metronic's Menu components allows to manage both horizontal and vertical multi level menus for both desktop and mobile modes.
							</p>
						</div>

						<div class="space"></div>

						<h3 id="sec15-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>
								The below code shows the basic <code>vertical menu</code> initialization with
								<code>accordion</code> submenu mode:
							</p>
							<pre><code class="js">var menu = new mMenu('m_ver_menu', {
    // submenu setup
    submenu: {
        desktop: {
            // by default the menu mode set to accordion in desktop mode
            default: 'accordion,
            // whenever body has this class switch the menu mode to dropdown
            state: {
                body: 'm-aside-left--minimize',
                mode: 'dropdown'
            }
        },
        tablet: 'accordion', // menu set to accordion in tablet mode
        mobile: 'accordion'  // menu set to accordion in mobile mode
    },

    //accordion setup
    accordion: {
        autoScroll: true,
        expandAll: false
    }
});
</code></pre>

							<div class="space"></div>
							<p>
								The below code shows the basic <code>vertical menu</code> initialization with
								<code>hoverable dropdown</code> submenu mode:
							</p>

							<pre><code class="js">var menu = new mMenu('m_ver_menu', {
    // submenu setup
    submenu: {
        desktop: {
            // by default the menu mode set to accordion in desktop mode
            default: 'dropdown',
            // whenever body has this class switch the menu mode to dropdown
            state: {
                body: 'm-aside-left--minimize',
                mode: 'dropdown'
            }
        },
        tablet: 'accordion', // menu set to accordion in tablet mode
        mobile: 'accordion'  // menu set to accordion in mobile mode
    },

    //accordion setup
    accordion: {
        autoScroll: true,
        expandAll: false
    }
});
</code></pre>

							<div class="space"></div>

							<p>
								The below code shows the basic <code>horizontal menu</code> initialization:
							</p>
							<pre><code class="js">var menu = new mMenu('m_header_menu', {
    submenu: {
        desktop: 'dropdown',
        tablet: 'accordion',
        mobile: 'accordion'
    },
    accordion: {
        slideSpeed: 200,  // accordion toggle slide speed in milliseconds
        autoScroll: true, // enable auto scrolling(focus) to the clicked menu item
        expandAll: false   // allow having multiple expanded accordions in the menu
    }
});
</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec15-3" class="section-title">Options</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>autoscroll.speed</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Autoscroll on accordion submenu tag</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>autoscroll: {
    speed: 1200
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>accordion.slideSpeed</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Accordion toggle slide speed in milliseconds</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>accordion: {
    slideSpeed: 200
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>accordion.autoScroll</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Enable auto scrolling(focus) to the clicked menu item</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>accordion: {
    autoScroll: true
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>accordion.autoScrollSpeed</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Enable auto scrolling(focus) to the clicked menu item</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>accordion: {
    autoScrollSpeed: 1200
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>accordion.expandAll</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Allow having multiple expanded accordions in the menu</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>accordion: {
    expandAll: true
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>dropdown.timeout</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Timeout in milliseconds to show and hide the hoverable submenu dropdown</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>dropdown: {
    timeout: 500
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>submenu.desktop</code></td>
									<td nowrap><code>object|string</code></td>
									<td>
										<p>Submenu setup for desktop. Set default for the menu mode in desktop mode.
											Whenever any element in HTML has
											<code>desktop.state.body</code> class switch the menu mode to
											<code>desktop.state.mode</code></p>

										<p>In the sample below scenario. By default the menu mode set to accordion in desktop mode. Whenever body tag has this class switch the menu mode to dropdown</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>submenu: {
    desktop: {
        default: 'accordion',
        state: {
            body: 'm-aside-left--minimize',
            mode: 'dropdown'
        }
    },
},</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec15-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>setActiveItem(item)</code></td>
									<td>
										<p>Set active menu item</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>item</code></td>
												<td nowrap><code>HTML object</code></td>
												<td><p>Menu item HTML element object</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>getBreadcrumbs(item)</code></td>
									<td>
										<p>Get breadcrumb for menu item</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>item</code></td>
												<td nowrap><code>HTML object</code></td>
												<td><p>Menu item HTML element object</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>getPageTitle(item)</code></td>
									<td>
										<p>Get page title for menu item</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>item</code></td>
												<td nowrap><code>HTML object</code></td>
												<td><p>Menu item HTML element object</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>hideDropdown(item)</code></td>
									<td>
										<p>Hide dropdown submenu item</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>item</code></td>
												<td nowrap><code>HTML object</code></td>
												<td><p>Menu item HTML element object</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>pauseDropdownHover(item)</code></td>
									<td>
										<p>Disable menu for given time</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>item</code></td>
												<td nowrap><code>HTML object</code></td>
												<td><p>Menu item HTML element object</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>resumeDropdownHover(item)</code></td>
									<td>
										<p>Enable menu item back after being paused</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>item</code></td>
												<td nowrap><code>HTML object</code></td>
												<td><p>Menu item HTML element object</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>getSubmenuMode()</code></td>
									<td>
										<p>Get submenu mode</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>reload()</code></td>
									<td>
										<p>Reload the menu</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec16" class="section">
						<h2 class="section-head">Dropdown</h2>

						<h3 id="sec16-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mDropdown</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/dropdown.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec16-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
							<pre><code>var dropdown1 = new mDropdown('m_dropdown_api_1', options);</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec16-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    toggle: 'click',
    hoverTimeout: 300,
    skin: 'light',
    height: 'auto',
    maxHeight: false,
    minHeight: false,
    persistent: false,
    mobileOverlay: true
}</code></pre>
							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>toggle</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Dropdown toggle</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>toggle: 'click'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>hoverTimeout</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Dropdown hover timeout in miliseconds</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>hoverTimeout: 300</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>skin</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Dropdown skin theme</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>skin: 'light'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>height</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Dropdown height CSS in px.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>height: 'auto'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>maxHeight</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Dropdown maximum height. Set false to disable.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>maxHeight: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>minHeight</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Dropdown minumum height. Set false to disable.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>minHeight: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>persistent</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Enable/disable dropdown persistent.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>persistent: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>mobileOverlay</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Enable/disable dropdown overlay in mobile mode.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>mobileOverlay: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec16-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>setContent(contents)</code></td>
									<td>
										<p>Set dropdown content</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>contents</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Inner HTML to be placed in the dropdown content</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>show()</code></td>
									<td>
										<p>Set show dropdown</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>hide()</code></td>
									<td>
										<p>Set hide dropdown</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>toggle()</code></td>
									<td>
										<p>Set toggle dropdown</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>isPersistent()</code></td>
									<td>
										<p>Check dropdown persistent is enabled or disabled</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>isShown()</code></td>
									<td>
										<p>Check dropdown is shown or hidden</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec17" class="section">
						<h2 class="section-head">Header</h2>

						<h3 id="sec17-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mHeader</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/header.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec17-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>

							<pre><code>var header = new mHeader('m_header', options);</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec17-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    classic: false,
    offset: {
        mobile: 150,
        desktop: 200
    },
    minimize: {
        mobile: false,
        desktop: false
    }
}</code></pre>
							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>classic</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Header type</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>classic: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>offset</code></td>
									<td nowrap><code>object</code></td>
									<td>
										<p>Set header top offset for both desktop and mobile mode</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>offset: {
    mobile: 150,
    desktop: 200
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>minimize</code></td>
									<td nowrap><code>object</code></td>
									<td>
										<p>Set header minimize for both desktop and mobile mode</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>offset: {
    mobile: false,
    desktop: false
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec17-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec18" class="section">
						<h2 class="section-head">Offcanvas</h2>

						<h3 id="sec18-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mOffcanvas</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/offcanvas.jsjs</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec18-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
							<pre><code>horMenuOffcanvas = new mOffcanvas('m_header_menu', {
    baseClass: 'm-aside-left--offcanvas-default',
    overlay: true,
    closeBy: 'm_aside_left_close_btn',
    toggleBy: {
        target: 'm_aside_left_offcanvas_toggle',
        state: 'm-brand__toggler--active'
    }
});</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec18-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    baseClass: 'm-aside-left--offcanvas-default',
    overlay: true,
    closeBy: 'm_aside_left_close_btn',
    toggleBy: {
        target: 'm_aside_left_offcanvas_toggle',
        state: 'm-brand__toggler--active'
    }
}</code></pre>
							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>overlay</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Enable/disable offcanvas overlay</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>overlay: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>baseClass</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set the base class for the offcanvas</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>baseClass: 'm-aside-header-menu-mobile'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>closeBy</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Define the element for the off canvas to be cloased when this element is clicked</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>closeBy: 'm_aside_header_menu_mobile_close_btn'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>toggleBy</code></td>
									<td nowrap><code>object</code></td>
									<td>
										<p>Define which element for the toggle and set the active state class name</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>toggleBy: {
    target: 'm_aside_header_menu_mobile_toggle',
    state: 'm-brand__toggler--active'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec18-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>show()</code></td>
									<td>
										<p>Set show dropdown</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>hide()</code></td>
									<td>
										<p>Set hide dropdown</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec19" class="section">
						<h2 class="section-head">Portlet</h2>

						<h3 id="sec19-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mHeader</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/portlet.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec19-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
							<pre><code> var portlet = new mPortlet('m_portlet_tools_1', options);</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec19-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    bodyToggleSpeed: 400,
    tooltips: true,
    tools: {
        toggle: {
            collapse: 'Collapse',
            expand: 'Expand'
        },
        reload: 'Reload',
        remove: 'Remove',
        fullscreen: {
            on: 'Fullscreen',
            off: 'Exit Fullscreen'
        }
    }
};</code></pre>

							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>bodyToggleSpeed</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Set the portlet body toggle speed in miliseconds</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>bodyToggleSpeed: 400</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>tooltips</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Enable/disable portlet tooltips</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>tooltips: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>tooltips</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Enable/disable portlet tooltips</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>tooltips: true</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>tools.toggle</code></td>
									<td nowrap><code>object</code></td>
									<td>
										<p>Portlet toggle tools options. Set the title for the collapse and expand toggle.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>tools: {
    toggle: {
        collapse: 'Collapse',
        expand: 'Expand'
    }
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>tools.reload</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set portlet reload title in the tools.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>tools: {
    reload: 'Reload',
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>tools.remove</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set portlet remove title in the tools.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>tools: {
    remove: 'Remove',
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>tools.fullscreen</code></td>
									<td nowrap><code>object</code></td>
									<td>
										<p>Set portlet fullscreen title in the tools.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>tools: {
    fullscreen: {
        on: 'Fullscreen',
        off: 'Exit Fullscreen'
    }
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec19-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>setContent(contents)</code></td>
									<td>
										<p>Set dropdown content</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>contents</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Inner HTML to be placed in the dropdown content</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>remove()</code></td>
									<td>
										<p>Remove the portlet</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>reload()</code></td>
									<td>
										<p>Reload the portlet</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>toggle()</code></td>
									<td>
										<p>Toggle the portlet to collapse or expand</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>collapse()</code></td>
									<td>
										<p>Set portlet to collapse</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>expand()</code></td>
									<td>
										<p>Set portlet to expand</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>fullcreen()</code></td>
									<td>
										<p>Set portlet to fullscreen</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>unFullcreen()</code></td>
									<td>
										<p>Set portlet to default minimize</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>getBody()</code></td>
									<td>
										<p>Get the portlet body as HTML object</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>getSelf()</code></td>
									<td>
										<p>Get the portlet as HTML object</p>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec20" class="section">
						<h2 class="section-head">Quicksearch</h2>

						<h3 id="sec20-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mQuicksearch</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/quicksearch.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec20-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
							<pre><code>var quicksearch = new mQuicksearch('m_quicksearch', options);</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec20-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    mode: 'default', //'default/dropdown'
    minLength: 1,
    maxHeight: 300,
    requestTimeout: 200, // ajax request fire timeout in milliseconds
    inputTarget: 'm_quicksearch_input',
    iconCloseTarget: 'm_quicksearch_close',
    iconCancelTarget: 'm_quicksearch_cancel',
    iconSearchTarget: 'm_quicksearch_search',

    spinnerClass: 'm-loader m-loader--skin-light m-loader--right',
    hasResultClass: 'm-list-search--has-result',

    templates: {
        error: '&lt;div class="m-search-results m-search-results--skin-light"&gt;&lt;span class="m-search-result__message"&gt;{{message}}&lt;/div&gt;&lt;/div&gt;'
    }
};</code></pre>

							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>mode</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Quick search mode. Accepted values are <code>default</code> and
											<code>dropdown</code></p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>mode: 'default'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>minLength</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Minimum length of records to be displayed</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>minLength: 1</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>maxHeight</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Maximum height of result to be displayed</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>maxHeight: 300</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>requestTimeout</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>The timeout in miliseconds for the request</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>requestTimeout: 200</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>inputTarget</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>The target of input textbox where the search action to be triggered</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>inputTarget: 'm_quicksearch_input'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>iconCloseTarget</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set the icon for the search close</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>iconCloseTarget: 'm_quicksearch_close'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>iconCancelTarget</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set the icon for the search cancel</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>iconCancelTarget: 'm_quicksearch_cancel'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>iconSearchTarget</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set the icon for the search</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>iconSearchTarget: 'm_quicksearch_search'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>spinnerClass</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set spinner icon class name to be displayed during search action</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>spinnerClass: 'm-loader m-loader--skin-light m-loader--right'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>hasResultClass</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>Set search result class name when the search has result</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>hasResultClass: 'm-list-search--has-result'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>templates.error</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>The error template in HTML format, to be displayed when the search result has error.
											Add the placeholder
											<code>{{message}}</code> in the template, and it will be replaced by
											<code>showError(message)</code> API method.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre style="position: relative;overflow: auto;height: 100px;"><code style="position: absolute;">templates: {
    error: '&lt;div class="m-search-results m-search-results--skin-light"&gt;&lt;span class="m-search-result__message"&gt;{{message}}&lt;/div&gt;&lt;/div&gt;'
}</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec20-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>showResult(response)</code></td>
									<td>
										<p>Show the result of the search</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>response</code></td>
												<td nowrap><code>string</code></td>
												<td><p>The search result response to be displayed</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>showError(message)</code></td>
									<td>
										<p>Show the error based of the template error defined in the options.
											{{message}} placeholder in the error template will be replaced by the
											<code>message</code> parameter.</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>message</code></td>
												<td nowrap><code>string</code></td>
												<td><p>The text for the error</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>showProgress()</code></td>
									<td>
										<p>Show the search progress bar</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>hideProgress()</code></td>
									<td>
										<p>Hide the search progress bar</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>search()</code></td>
									<td>
										<p>Trigger search manually</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec21" class="section">
						<h2 class="section-head">Scrolltop</h2>

						<h3 id="sec21-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mScrolltop</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/scroll-top.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec21-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
							<pre><code>var scrollTop = new mScrollTop('m_scroll_top', options);</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec21-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    offset: 300,
    speed: 600
};</code></pre>

							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>offset</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Bottom offset for the scroll top button icon</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>offset: 300</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>speed</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>Speed of scroll to the top page</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>speed: 600</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec21-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec22" class="section">
						<h2 class="section-head">Toggle</h2>

						<h3 id="sec22-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mToggle</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/toggle.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec22-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
							<pre><code>var asideLeftToggle = new mToggle('m_aside_left_minimize_toggle', options);</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec22-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    target: 'body',
    targetState: 'm-brand--minimize m-aside-left--minimize',
    togglerState: 'm-brand__toggler--active'
}; </code></pre>

							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>target</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>The target for the class name changed</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>target: 'body'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>targetState</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>The state class name to be added to the <code>target</code></p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>targetState: 'm-brand--minimize m-aside-left--minimize'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>togglerState</code></td>
									<td nowrap><code>string</code></td>
									<td>
										<p>The active state for the toggler</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>togglerState: 'm-brand__toggler--active'</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec22-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>getState()</code></td>
									<td>
										<p>Get toggler state</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>toggle()</code></td>
									<td>
										<p>Toggle the toggler</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>toggleOn()</code></td>
									<td>
										<p>Set the toggler on</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>toggleOff()</code></td>
									<td>
										<p>Set the toggler off</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec23" class="section">
						<h2 class="section-head">Wizard</h2>

						<h3 id="sec23-1" class="section-title">Overview</h3>
						<div class="section-content">
							<p><code>mWizard</code> is a Metronic's custom plugin defined in
								<code>src/js/framework/components/general/wizard.js</code>.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec23-2" class="section-title">Initialization</h3>
						<div class="section-content">
							<p>First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.</p>
							<pre><code>var wizard = new mWizard('m_wizard',options);</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec23-3" class="section-title">Options</h3>
						<div class="section-content">
							<pre><code>var options = {
    startStep: 1,
    manualStepForward: false
};</code></pre>

							<div class="space"></div>

							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Field</th>
									<th class="force-border">Type</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><code>startStep</code></td>
									<td nowrap><code>number</code></td>
									<td>
										<p>The page number of step to start at the initial load</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>startStep: 1</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap><code>manualStepForward</code></td>
									<td nowrap><code>boolean</code></td>
									<td>
										<p>Set enable/disable to manually step forward</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th class="force-border">Sample</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td>
													<pre><code>manualStepForward: false</code></pre>
												</td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec23-5" class="section-title">API Methods</h3>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Method</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap style="vertical-align: top;"><code>setDefaults(options)</code></td>
									<td>
										<p>Set default options</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>options</code></td>
												<td nowrap><code>object</code></td>
												<td><p>A new options object for the menu</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>goNext()</code></td>
									<td>
										<p>Go to the next step</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>goPrev()</code></td>
									<td>
										<p>Go to the previous step</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>goLast()</code></td>
									<td>
										<p>Go to the last step</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>goFirst()</code></td>
									<td>
										<p>Go to the first step</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>getStep()</code></td>
									<td>
										<p>Get current step page number</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>isLastStep()</code></td>
									<td>
										<p>Check if the current step number is the last step</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>isFirstStep()</code></td>
									<td>
										<p>Check if the current step number is the first step</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>goTo(number)</code></td>
									<td>
										<p>Jump the step page into the specified step number</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>number</code></td>
												<td nowrap><code>number</code></td>
												<td><p>Number of step to jump</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>on(name, handler)</code></td>
									<td>
										<p>Register event</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td nowrap style="vertical-align: top;"><code>one(name, handler)</code></td>
									<td>
										<p>Register event to be run once</p>
										<div class="space"></div>

										<table class="table-list">
											<thead>
											<tr>
												<th colspan="3" class="force-border">Input Parameters</th>
											</tr>
											</thead>
											<thead>
											<tr>
												<th class="force-border">Name</th>
												<th class="force-border">Type</th>
												<th class="force-border">Description</th>
											</tr>
											</thead>
											<tbody>
											<tr>
												<td nowrap><code>name</code></td>
												<td nowrap><code>string</code></td>
												<td><p>Unique event name</p></td>
											</tr>
											<tr>
												<td nowrap><code>handler</code></td>
												<td nowrap><code>function</code></td>
												<td><p>Callback function handler for the event</p></td>
											</tr>
											</tbody>
										</table>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec7" class="section">
						<h2 class="section-head">Angular</h2>

						<h3 id="sec71" class="section-title">Overview</h3>
						<div class="section-content">
							<p>Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser.</p>
						</div>

						<div class="space"></div>

						<h3 id="sec72" class="section-title">Files Structure</h3>
						<div class="section-content">
							Angular source code can be found in
							<code>[root]/dist/[demo_id]/</code>.<br>
							Below the list of demo file structure in Angular app.
							<div class="space"></div>
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Path</th>
									<th class="force-border">Description</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td nowrap><span class="file-node file-node-dot">app</span></td>
									<td>The final build of Angular</td>
								</tr>
								<tr>
									<td nowrap><span class="file-node file-node-dot">node_modules</span></td>
									<td>The <code>node_modules/</code> directory is only for build tools.
										The
										<code>package.json</code> file in the app root defines what libraries will be installed into
										<code>node_modules/</code> when you run <code>npm install</code>.
									</td>
								</tr>
								<tr>
									<td nowrap><span class="file-node file-node-dot">src</span></td>
									<td>Main source folder</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">app</span></td>
									<td>Main app folder</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">_directives</span></td>
									<td>Contains directive for HTML modification</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">_services</span></td>
									<td>Services for script lazy loader</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">auth</span></td>
									<td>Authentication module for registration, login, and forgot password.</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">theme</span></td>
									<td>This is where theme partials is located.</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">app.component.html</span></td>
									<td>Main app template</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">app.component.ts</span></td>
									<td>Main app typescript</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">app.module.ts</span></td>
									<td>Main app module. The place where to import and declare required components.</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">app-routing.module.ts</span></td>
									<td>Base routing for the app. More routes can be found in
										<code>theme</code> folder
									</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 60px;">
										<span class="file-node file-node-dot">helpers.ts</span></td>
									<td>Helper functions</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">assets</span></td>
									<td>This folder will contain all the assets needed for app that are not related to Angular code.</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">environments</span></td>
									<td>This folder contains one file for each of destination environments, each exporting simple configuration variables to use in application</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">index.html</span></td>
									<td>The <code>index.html</code> lives at the root of front-end structure. The
										<code>index.html</code> file will primarily handle loading in all the libraries and Angular elements.
									</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">main.ts</span></td>
									<td>The main entry point for your app.</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">polyfills.ts</span></td>
									<td>
										<p>Angular is built on the latest standards of the web platform. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.</p>
										<p>IE9, IE10 and IE11 requires to enable polyfills. Read more
											<a href="https://angular.io/guide/browser-support" target="_blank">angular.io/guide/browser-support</a>
										</p>
									</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">styles.ts</span></td>
									<td>Global styles go here which styles that affect all of your app need to be in a central place.</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">tsconfig.app.ts</span></td>
									<td>TypeScript compiler configuration for the Angular app.</td>
								</tr>
								<tr>
									<td nowrap style="padding-left: 40px;">
										<span class="file-node file-node-dot">typings.ts</span></td>
									<td>TypeScript adds static typing to JavaScript.</td>
								</tr>
								<tr>
									<td nowrap><span class="file-node file-node-dot">.angular-cli.json</span></td>
									<td>Angular CLI loads its configuration from <code>.angular-cli.json</code></td>
								</tr>
								<tr>
									<td nowrap><span class="file-node file-node-dot">package.json</span></td>
									<td>A package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.</td>
								</tr>
								<tr>
									<td nowrap><span class="file-node file-node-dot">tsconfig.json</span></td>
									<td>
										<code>tsconfig.json</code> file in a directory indicates that the directory is the root of a TypeScript project.
										The
										<code>tsconfig.json</code> file specifies the root files and the compiler options required to compile the project.
									</td>
								</tr>
								</tbody>
							</table>
						</div>

						<div class="space"></div>

						<h3 id="sec73" class="section-title">Installation</h3>
						<div class="section-content">
							<p class="alert alert-warning" style="margin: 25px 0 25px 0;">Please build the theme first at
								<a href="#sec43">Tasks</a> section before start to build the Angular app.</p>

							<h4 class="section-subtitle">Angular CLI</h4>
							<p>Angular CLI is a command line interface for the latest Angular. Please install it before start with the Angular app.</p>
							<pre><code>npm install --global @angular/cli@latest</code></pre>

							<div class="alert alert-warning" style="margin: 25px 0 25px 0;">
								<p>If you have Angular CLI installed previously, please update it to the latest Angular CLI. Remove the older version and re-install it.</p>
								<pre><code>npm uninstall --global @angular/cli</code></pre>
								<pre><code>npm install --global @angular/cli@latest</code></pre>
							</div>

							<div class="space"></div>

							<h4 class="section-subtitle">Angular for production</h4>
							<p>Run this command line in the Angular demo directory.
								This build process will use method of ahead-of-time (AOT) compilation.
								The ahead-of-time (AOT) compiler can catch template errors early and improve performance by compiling at build time.
								<br>
								The compiled Angular app will be in the folder
								<code>[root]/dist/[demo_id]/</code>.
							</p>
							<pre><code>ng build --prod</code></pre>
							<p>With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.</p>

							<pre><code>ng build --prod --op=app</code></pre>
							<p><code>--op=app</code> to specify which folder to output. If not set,
								<code>dist</code> folder will be the default. <br>
								For demo, please run build with
								<code>--op=app</code> for the Angular demo links in the documentation to work.</p>

							<p>If you're serving the app out of a subfolder, edit a version of index.html to set the base href appropriately.
								For example, if the URL to <code>index.html</code> is
								<code>www.mysite.com/my/app/index.html</code>, set the base href to:</p>
							<pre><code>&#60;base href="/my/app/"&#62;</code></pre>

							<p>You also can set the base href right in the <code>ng build</code> command</p>
							<pre><code>ng build --prod --base-href="/my/app/"</code></pre>

							<div class="space"></div>

							<h4 class="section-subtitle">Ahead-of-time (AOT) vs just-in-time (JIT)</h4>
							<p>There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries.
								To use JIT build, run this command line to build.</p>
							<pre><code>ng build --prod --aot=false</code></pre>

							<div class="space"></div>

							<h4 class="section-subtitle">Possible issues with Angular build</h4>
							<p class="alert alert-warning" style="margin: 25px 0 25px 0;">AOT build process can be failed due to
								<code>JavaScript heap out of memory</code> error. This is a known
								<a target="_blank" href="https://github.com/angular/angular-cli/issues/5618">issue</a> of Angular-cli.
								For the the temporary solution of this issue, you can use this workaround to increase allowed memory for node process.
							</p>
							<p>For Windows users:</p>
							<pre><code>node --max_old_space_size=8192 "node_modules\@angular\cli\bin\ng" build --prod</code></pre>
							<p>For Linux and Mac users:</p>
							<pre><code>node --max_old_space_size=8192 ./node_modules/.bin/ng build --prod</code></pre>
						</div>

						<div class="space"></div>

						<h4 class="section-subtitle">Polyfills</h4>
						<p>Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.
							A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.</p>
						<p class="alert alert-info" style="margin: 25px 0 25px 0;">To support Angular in IE, open this file
							<code>[root]/dist/[demo_id]/src/polyfills.ts</code>.
							Uncomment all the imports under Browser Polyfills list and classlist.js</p>

						<p>Read more about browser support here
							<a href="https://angular.io/guide/browser-support">https://angular.io/guide/browser-support</a>
						</p>

						<div class="space"></div>

						<h3 id="sec74" class="section-title">Tools</h3>
						<div class="section-content">
							<div class="space"></div>
							<h4 class="section-subtitle">Build Angular project</h4>
							<p>After generating Angular version layout from the builder, the generated Angular source code can be found in
								<code>[root]/dist/</code>. Each demo will generate different Angular app.
							</p>
							<p>To setup Angular app, go to Angular app root and install Angular dependencies by this command line.</p>
							<pre><code>npm install</code></pre>
							<p>Start node development server for Angular by this command line, then you can access it at
								<code>http://localhost:4200</code> via browser.</p>
							<pre><code>npm start</code></pre>
							<p>This is optional tool for formatting Angular source code which is Typescript. When you run
								<code>npm install</code>, formatting will be done automatically. But, everytime you generate a new Angular app, you will need to run this manually to reformat the source code.
							</p>
							<pre><code>npm run tsformat</code></pre>
						</div>

						<div class="space"></div>

						<h3 id="sec75" class="section-title">Sample Codes</h3>
						<div class="section-content">
							<div class="space"></div>
							<h4 class="section-subtitle">How to use Metronic <code>mApp</code> and
								<code>mUtil</code></h4>
							<p>mApp and mUtil are the Metronic base utilize class that privide helper functions.
								The source files are located at
								<code>[root]/src/js/framework/base/</code></p>
							<p>Declare <code>mApp</code> or <code>mUtil</code> at the top of the component.</p>
							<pre><code>declare let mApp: any;</code></pre>
							<pre><code>declare let mUtil: any;</code></pre>
							<p>Sample code</p>
							<pre><code>mApp.blockPage();
mApp.unblockPage();</code></pre>
						</div>

						<div class="space"></div>
					</div>

					<div class="separator"></div>

					<div id="sec10" class="section">
						<h2 class="section-head">Online Layout Builder</h2>
						<p>
							You can use the Metronic online layout builder for the latest theme version using following URL:<br>
							<a href="https://keenthemes.com/metronic/preview/?page=builder&demo=default" target="_blank">
								https://keenthemes.com/metronic/preview/?page=builder&demo=default
							</a>
						</p>
						<p>
							You can switch to a specific demo by spesifing the demo ID in the URL:<br>
							<code>https://keenthemes.com/metronic/preview/?page=builder&demo=[demo_id]</code>
						</p>
					</div>

					<div class="separator"></div>

					<div id="sec8" class="section">
						<h2 class="section-head">API Reference</h2>
						<div class="section-content">
							<p>Sample API in theme demos are included for user references.
								<code>[root]/docs/api_reference</code>. These server side scrips and json files are used by datatable, dropzone, jstree, typeahead and other plugin demos.
							</p>
							<p>The sample API is built using PHP code. Please check the section
								<a href="#sec42">Config</a> and
								<a href="#sec43">Tasks</a> above for updating the API URL in the source to our demo site.
							</p>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec11" class="section">
						<h2 class="section-head">.NET Integration</h2>
						<div class="section-content">
							<h3 class="section-title">ASP.NET Zero - Metronic .NET Integration</h3>
							<p>
								<a href="http://aspnetzero.com/?ref=keen" target="_blank">ASP.NET Zero</a> is a starting point for new web projects based on our Metronic Theme UI.
								For more info please visit the product
								<a href="http://aspnetzero.com/?ref=keen" target="_blank">website</a>.
							</p>
							<p>
								Get it as your base application and directly start to develop your business code with:
							<ul>
								<li>SOLID architecture</li>
								<li>Material design UI</li>
								<li>Cross-cutting concerns implemented</li>
								<li>Built with best practices</li>
								<li>Well documented</li>
								<li>Full source code included</li>
							</ul>
							</p>
							<p>
								For more info please check
								<a href="https://aspnetzero.com/#features" target="_blanl">Full List Of Features</a>.
							</p>

							<br><br>

							<h3 class="section-title">Mecons - .NET Tag Helpers Library For Metronic</h3>
							<p>
								<a href="https://www.brecons.net/Product/Mecons" target="_blank">Mecons</a> is the Most complete & trusted Tag Helper Library for Metronic.
								Mecons comes with Metronic 5, the most completed & trusted Admin Theme and UI Framework:
							<ul>
								<li>30+ Components and Controls for Metronic</li>
								<li>Validation States for Data Binding</li>
								<li>Intellisense Support in Visual Studio</li>
								<li>Provisioning over Bower and NuGet</li>
								<li>Free and up-to-date Online Documentation</li>
								<li>Full source code included</li>
							</ul>
							</p>
							<p>
								For more info please check
								<a href="https://www.brecons.net/Product/Mecons" target="_blanl">Full List Of Features</a>.
							</p>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec13" class="section">
						<h2 class="section-head">More Resources</h2>
						<div class="section-content">
							<h3 class="section-title">Keenthemes Freebies</h3>
							<p class="section-content">
								Our
								<a href="https://keenthemes.com/free-bootstrap-templates/" target="_blank">collection of bootstrap themes and templates</a> are totally free and you may use them for your private or commercial projects at absolutely no cost.
							</p>
							<br>
							<h3 class="section-title">Hire Us</h3>
							<p>
								If you need theme customization or custom web development, please provide your project details using
								<a href="https://keenthemes.com/hireus/" target="_blank">this form</a> and one of our well established development partners will get back to you with a
								<a href="https://keenthemes.com/hireus/" target="_blank">free quote</a>.
							</p>
							<br>
							<h3 class="section-title">JANGO - The Powerful HTML5 Component Based Bootstrap Frontend Theme</h3>
							<p>
								<a href="https://themeforest.net/item/jango-highly-flexible-component-based-html5-template/11987314?ref=keenthemes" target="_blank">JANGO</a> is a multi-purpose Bootstrap HTML5 component based theme. JANGO is incredibly robust and flexible that will easily be able to support every site development such as corporate, portfolio, blogs, product showcases, landing / one-page sites and much more to power any starting point for new web projects based on our Metronic Theme UI.
								For more info please visit the product
								<a target="_blank" href="https://themeforest.net/item/jango-highly-flexible-component-based-html5-template/11987314?ref=keenthemes">page</a>.
							</p>
							<br>
							<h3 class="section-title">JANGO Drupal - The Ultimate Drupal 7/8 Theme With Layout Builder</h3>
							<p>
								<a href="https://themeforest.net/item/jango-highly-flexible-component-based-drupal-theme/18918715?ref=keenthemes" target="_blank">JANGO Drupal</a> is an ever expanding, fully responsive and multi-purpose Drupal 7/8 theme powered by Visual Shortcodes and Layout Builder. For more info please visit the product
								<a target="_blank" href="https://themeforest.net/item/jango-highly-flexible-component-based-drupal-theme/18918715?ref=keenthemes">page</a>.
							</p>
						</div>
					</div>

					<div class="separator"></div>

					<div id="sec9" class="section">
						<h2 class="section-head">References</h2>
						<div class="section-content">
							<table class="table-list">
								<thead>
								<tr>
									<th class="force-border">Term</th>
									<th class="force-border">Link</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td>Node.js</td>
									<td><a href="https://nodejs.org/en/" target="_blank">https://nodejs.org/en/</a>
									</td>
								</tr>
								<tr>
									<td>NPM</td>
									<td><a href="https://www.npmjs.com/" target="_blank">https://www.npmjs.com/</a>
									</td>
								</tr>
								<tr>
									<td>Gulp</td>
									<td><a href="https://gulpjs.com/" target="_blank">https://gulpjs.com/</a></td>
								</tr>
								<tr>
									<td>Angular</td>
									<td><a href="https://angular.io/" target="_blank">https://angular.io/</a></td>
								</tr>
								<tr>
									<td>Ahead-of-Time (AOT)</td>
									<td>
										<a href="https://angular.io/guide/aot-compiler" target="_blank">https://angular.io/guide/aot-compiler</a>
									</td>
								</tr>
								<tr>
									<td>jQuery</td>
									<td><a href="https://jquery.com/" target="_blank">https://jquery.com/</a></td>
								</tr>
								<tr>
									<td>Bootstrap</td>
									<td>
										<a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a>
									</td>
								</tr>
								<tr>
									<td>Popper.js</td>
									<td><a href="https://popper.js.org/" target="_blank">https://popper.js.org/</a>
									</td>
								</tr>
								<tr>
									<td>JavaScript Cookie</td>
									<td>
										<a href="https://github.com/js-cookie/js-cookie" target="_blank">https://github.com/js-cookie/js-cookie</a>
									</td>
								</tr>
								<tr>
									<td>SweetAlert2</td>
									<td>
										<a href="https://github.com/js-cookie/js-cookie" target="_blank">https://limonte.github.io/sweetalert2/</a>
									</td>
								</tr>
								<tr>
									<td>JQuery Smooth Scroll</td>
									<td>
										<a href="https://www.npmjs.com/package/jquery-smooth-scroll" target="_blank">https://www.npmjs.com/package/jquery-smooth-scroll</a>
									</td>
								</tr>
								<tr>
									<td>jQuery Form Plugin</td>
									<td>
										<a href="http://malsup.com/jquery/form/" target="_blank">http://malsup.com/jquery/form/</a>
									</td>
								</tr>
								<tr>
									<td>jQuery custom content scroller</td>
									<td>
										<a href="http://manos.malihu.gr/jquery-custom-content-scroller/" target="_blank">http://manos.malihu.gr/jquery-custom-content-scroller/</a>
									</td>
								</tr>
								<tr>
									<td>jQuery BlockUI Plugin</td>
									<td>
										<a href="http://malsup.com/jquery/block/" target="_blank">http://malsup.com/jquery/block/</a>
									</td>
								</tr>
								<tr>
									<td>Prism</td>
									<td><a href="http://prismjs.com/" target="_blank">http://prismjs.com/</a></td>
								</tr>
								<tr>
									<td>Bootstrap Datepicker</td>
									<td>
										<a href="https://bootstrap-datepicker.readthedocs.io/en/latest/" target="_blank">https://bootstrap-datepicker.readthedocs.io/en/latest/</a>
									</td>
								</tr>
								<tr>
									<td>DateTime Picker</td>
									<td>
										<a href="http://www.malot.fr/bootstrap-datetimepicker/" target="_blank">http://www.malot.fr/bootstrap-datetimepicker/</a>
									</td>
								</tr>
								<tr>
									<td>Moment.js</td>
									<td><a href="https://momentjs.com/" target="_blank">https://momentjs.com/</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Timepicker</td>
									<td>
										<a href="https://github.com/jdewit/bootstrap-timepicker" target="_blank">https://github.com/jdewit/bootstrap-timepicker</a>
									</td>
								</tr>
								<tr>
									<td>Date Range Picker</td>
									<td>
										<a href="http://www.daterangepicker.com/" target="_blank">http://www.daterangepicker.com/</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap TouchSpin</td>
									<td>
										<a href="https://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">https://www.virtuosoft.eu/code/bootstrap-touchspin/</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Maxlength</td>
									<td>
										<a href="http://mimo84.github.io/bootstrap-maxlength/" target="_blank">http://mimo84.github.io/bootstrap-maxlength/</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Switch</td>
									<td>
										<a href="http://bootstrapswitch.com/" target="_blank">http://bootstrapswitch.com/</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Selectsplitter</td>
									<td>
										<a href="https://github.com/xavierfaucon/bootstrap-selectsplitter" target="_blank">https://github.com/xavierfaucon/bootstrap-selectsplitter</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Select</td>
									<td>
										<a href="http://silviomoreto.github.io/bootstrap-select/" target="_blank">http://silviomoreto.github.io/bootstrap-select/</a>
									</td>
								</tr>
								<tr>
									<td>Select2</td>
									<td>
										<a href="https://select2.github.io/" target="_blank">https://select2.github.io/</a>
									</td>
								</tr>
								<tr>
									<td>typeahead.js</td>
									<td>
										<a href="https://twitter.github.io/typeahead.js/" target="_blank">https://twitter.github.io/typeahead.js/</a>
									</td>
								</tr>
								<tr>
									<td>jQuery Input Mask plugin</td>
									<td>
										<a href="http://robinherbots.github.io/Inputmask/" target="_blank">http://robinherbots.github.io/Inputmask/</a>
									</td>
								</tr>
								<tr>
									<td>Autosize</td>
									<td>
										<a href="http://www.jacklmoore.com/autosize" target="_blank">http://www.jacklmoore.com/autosize</a>
									</td>
								</tr>
								<tr>
									<td>clipboard.js</td>
									<td>
										<a href="https://clipboardjs.com/" target="_blank">https://clipboardjs.com/</a>
									</td>
								</tr>
								<tr>
									<td>Ion.RangeSlider</td>
									<td>
										<a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/en.html</a>
									</td>
								</tr>
								<tr>
									<td>DropzoneJS</td>
									<td>
										<a href="http://www.dropzonejs.com/" target="_blank">http://www.dropzonejs.com/</a>
									</td>
								</tr>
								<tr>
									<td>Summernote</td>
									<td><a href="http://summernote.org" target="_blank">http://summernote.org</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Markdown</td>
									<td>
										<a href="http://www.codingdrama.com/bootstrap-markdown/" target="_blank">http://www.codingdrama.com/bootstrap-markdown/</a>
									</td>
								</tr>
								<tr>
									<td>jQuery Validation Plugin</td>
									<td>
										<a href="https://jqueryvalidation.org/" target="_blank">https://jqueryvalidation.org/</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Notify</td>
									<td>
										<a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">http://bootstrap-notify.remabledesigns.com/</a>
									</td>
								</tr>
								<tr>
									<td>Animate.css</td>
									<td>
										<a href="https://daneden.github.io/animate.css/" target="_blank">https://daneden.github.io/animate.css/</a>
									</td>
								</tr>
								<tr>
									<td>Toastr</td>
									<td>
										<a href="https://github.com/CodeSeven/toastr" target="_blank">https://github.com/CodeSeven/toastr</a>
									</td>
								</tr>
								<tr>
									<td>jsTree</td>
									<td><a href="http://jstree.com/" target="_blank">http://jstree.com/</a></td>
								</tr>
								<tr>
									<td>morris.js</td>
									<td>
										<a href="http://morrisjs.github.io/morris.js/" target="_blank">http://morrisjs.github.io/morris.js/</a>
									</td>
								</tr>
								<tr>
									<td>Chartist.js</td>
									<td>
										<a href="https://gionkunz.github.io/chartist-js/" target="_blank">https://gionkunz.github.io/chartist-js/</a>
									</td>
								</tr>
								<tr>
									<td>Chart.js</td>
									<td><a href="http://www.chartjs.org" target="_blank">http://www.chartjs.org</a>
									</td>
								</tr>
								<tr>
									<td>Bootstrap Session Timeout</td>
									<td>
										<a href="https://github.com/orangehill/bootstrap-session-timeout" target="_blank">https://github.com/orangehill/bootstrap-session-timeout</a>
									</td>
								</tr>
								<tr>
									<td>Jquery Idletimer</td>
									<td>
										<a href="https://github.com/thorst/jquery-idletimer" target="_blank">https://github.com/thorst/jquery-idletimer</a>
									</td>
								</tr>
								<tr>
									<td>Counter-Up</td>
									<td>
										<a href="http://bfintal.github.io/Counter-Up/demo/demo.html" target="_blank">http://bfintal.github.io/Counter-Up/demo/demo.html</a>
									</td>
								</tr>
								<tr>
									<td>Waypoints</td>
									<td>
										<a href="http://imakewebthings.com/waypoints/" target="_blank">http://imakewebthings.com/waypoints/</a>
									</td>
								</tr>
								<tr>
									<td>Socicon</td>
									<td>
										<a href="http://www.socicon.com/" target="_blank">http://www.socicon.com/</a>
									</td>
								</tr>
								<tr>
									<td>Font Awesome</td>
									<td><a href="http://fontawesome.io/" target="_blank">http://fontawesome.io/</a>
									</td>
								</tr>
								<tr>
									<td>Flaticon</td>
									<td>
										<a href="https://www.flaticon.com/" target="_blank">https://www.flaticon.com/</a>
									</td>
								</tr>
								<tr>
									<td>Gmaps.js</td>
									<td>
										<a href="http://hpneo.github.io/gmaps/" target="_blank">http://hpneo.github.io/gmaps/</a>
									</td>
								</tr>
								<tr>
									<td>jQuery Vector Maps</td>
									<td><a href="https://jqvmap.com/" target="_blank">https://jqvmap.com/</a></td>
								</tr>
								<tr>
									<td>Flot</td>
									<td>
										<a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a>
									</td>
								</tr>
								<tr>
									<td>Owl Carousel 2</td>
									<td>
										<a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank">https://owlcarousel2.github.io/OwlCarousel2/</a>
									</td>
								</tr>
								<tr>
									<td>Popper.js</td>
									<td>
										<a href="https://popper.js.org/popper-documentation.html" target="_blank">https://popper.js.org/popper-documentation.html</a>
									</td>
								</tr>
								<tr>
									<td>Tooltip.js</td>
									<td>
										<a href="https://popper.js.org/tooltip-examples.html" target="_blank">https://popper.js.org/tooltip-examples.html</a>
									</td>
								</tr>
								<tr>
									<td>Datatables</td>
									<td><a href="http://datatables.net" target="_blank">http://datatables.net</a></td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>

				</div><!-- contents END -->

			</div>
		</div>
	</section><!-- section END -->

	<section class="section section--bg"><!-- section -->
		<div class="content">
			<h2 class="title text-center">The Ultimate Bootstrap Admin Theme Trusted By Over 50,000 Developers World Wide</h2>
			<div class="text-center">
				<a href="https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes" target="_blank" class="button">PURCHASE NOW</a>
			</div>
		</div>
	</section><!-- section END -->

	<footer>
		<img src="assets/img/logo_keenthemes_2.png" alt="">
		<form action="//keenthemes.us3.list-manage.com/subscribe/post?u=b10f23244c11e2946463ea844&amp;id=3aba0b6220" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
			<div class="subscribe">
				<input type="email" name="EMAIL" placeholder="Enter your email to subscribe newsletter">
				<button type="submit" name="subscribe">Submit</button>
			</div>
		</form>

		<div class="socials">
			<a href="http://twitter.com/keenthemes" target="_blank"><i class="socicon-twitter"></i></a>
			<a href="http://facebook.com/keenthemes" target="_blank"><i class="socicon-facebook"></i></a>
			<a href="https://dribbble.com/keenthemes" target="_blank"><i class="socicon-dribbble"></i></a>
			<a href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes" target="_blank"><i class="socicon-envato" alt=""></i></a>
		</div>
	</footer>

</div><!-- wrapper END -->

<div class="cover-layout"></div>

<script>
  // Bind as an event handler
  $(document).ready(function() {
    $('.intro__video').on('click', '[data-lightbox]', lity);
  });
</script>

<script>
  $('.contents__sidebar').fixedsticky();
</script>


</body>
</html>
